CODEWITHSUNDEEP
javascriptpluginstinymce
MikeBau
MikeBau

Reputation: 154

TinyMCE 5.2. How to reference dialog elements in a plugin

I am trying to modify the TinyMCE link plugin (plugin.js) to adapt it to the project where I am working.

I am not able to hide / show an item in the modal window (Dialog) of the link plugin. (I can't reference elements as I see theirs Ids change in a new execution)

Edited: (At least I would like for knowing how to reference an element within the Dialog. The provided 'name' does not exist in the inputs and selectboxes (as I can see in the sourcecode), and theirs id are random generated on each new page request. If I could refer to elements I can take other ways to find a solution)

I have added a selectbox called 'linktype' to the dialog of link plugin. If its selected value is 'internal' then the url inputtext must hide and show another combobox called 'entities'. If, on the other hand, 'external' is selected, then hide the combobox 'entities' and show the inputbox 'url'

I have included a function (in link/plugin.js) which is called in the onchange closures, trying to using the DOM methods to get it, but without success.

var onTypeLinkChange = function(data) {
     //data are the modal window elements
     if ( data.linktype == 'intlink' ) {
         tinymce.DOM.hide(data.url);
         tinymce.DOM.show(data.entities);
     }
     else {
         tinymce.DOM.hide(data.entities);
         tinymce.DOM.show(data.url);
     }          
     return Option.none();
  }
  
  var onChange = function (getData, change) {
    if (change.name === 'linktype') {
      return onTypeLinkChange(getData());
    } else if (change.name === 'url') {
      return onUrlChange(getData());
   [...]
  };
  return { onChange: onChange };
};

Upvotes: 0

Views: 418

Answers (1)

MikeBau
MikeBau

Reputation: 154

After having investigated how to access elements within the dialogue, I think I can conclude that it cannot. In addition, the ideal it was also necessary to hide / show the labels (everything associated with the component in the row)

Therefore I have chosen to access them via CSS, using jQuery. It is not what I was desire but it has worked.

var onTypeLinkChange = function(data) {
    if ( data.linktype == 'intlink' ) {
        //hides row (label and input)
        $('.tox-dialog__body-content .tox-form__group').eq(1).hide();
    }
    else {
        $('.tox-dialog__body-content .tox-form__group').eq(1).show();
    }
    return Option.none();
}

Upvotes: 1

Related Questions