CODEWITHSUNDEEP
javascriptjquerytinymce
Phil
Phil

Reputation: 4069

TinyMCE - Get reference to element from init method

I am using the TinyMCE editor on my textareas and I want to be able to add data attributes to the textarea like data-allow-image which would be true or false, and then enable to disable those toolbar items based on that value. I'm not sure how to get a reference to the element though from within the tinymce.init method.

Can anyone show me an example of how to accomplish this?

I'm hoping to do something along the lines of....

tinymce.init({
     mode: "textareas",
     editor_selector: "MYTEXTAREAS",
     toolbar1: (getElement().data('allow-image') == 'true' ? 'image' : '')
});

An example textarea tag would look like this...

<textarea name="whatever" class="MYTEXTAREAS" data-allow-image="true"></textarea>

This would allow the textarea above to get the tinyMCE WITH the image toolbar item, where if I had one set to data-allow-image="false" it would NOT get the image toolbar item.

Upvotes: 0

Views: 1019

Answers (2)

Phil
Phil

Reputation: 4069

I got it figured out. Basically, I add the icons I want removed on the textarea like so...

<textarea name="whatever" class="MYTEXTAREA" data-remove-icons="mce-i-chart"></textarea>

...and then in the init_instance_callback I call the function below which will loop over all created tinymce instances on the page, get their parent textarea element and adjust the toolbar by removing icons specified. The function is coded to split on PIPE in the data attribute that way I can specify multiple icons for removal.

function updateTinyMCE() {
     // Adjust the toolbar items based on the textarea attributes
     for (i=0; i<tinymce.editors.length; i++) {
        var thisElement = $(tinymce.editors[i].getElement());
        if (typeof thisElement.data('remove-icons') != 'undefined') {
            var thisRemoveIcons = thisElement.data('remove-icons').toString().split("|");
            for (x=0; x<thisRemoveIcons.length; x++) {
                $(tinymce.editors[i].editorContainer).find('.mce-ico.' + thisRemoveIcons[x]).closest('.mce-btn').remove();
            }
        }
    }           
}

Proof of concept available here https://jsfiddle.net/mnn75tmp/. This will remove the BOLD icon from the toolbar.

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13726

You can't dynamically get access to the textarea's attributes while in the init/configuration call.

Perhaps the easiest solution would be to use a different class on the textarea based on whether or not you want that plugin included? You can then have two configuration objects where the toolbars loaded are different?

I would start with a base configuration that contains all the configuration options that are the same for all textareas. 

baseConfig = {
  ....
  //everything here except your selector and toolbar options 
  ....
}

You can then use JavaScript to modify/extend your standard init on an editor instance basis. Since baseConfig is just a simple JavaScript object you can inject additional properties into that object before you use it to initialize TinyMCE.

For example:

customConfigWithImage = {
  selector: ".editorWithImage"
  toolbar1: "...whatever you need for the toolbar"
}

customConfigNoImage = {
  selector: ".editorWithoutImage"
  toolbar1: "...whatever you need for the toolbar"
}

Then you can "merge" each customConfigXXXImage and baseConfig into a final set of configurations. The easiest way is to use jQuery's extend method:

$.extend(customConfigNoImage, baseConfig );
$.extend(customConfigWithImage, baseConfig);

...this will take all the properties from the baseConfig and merge them into the two customConfigXXXImage objects. Then you just init the editors using these objects:

tinymce.init(customConfigWithImage);  
tinymce.init(customConfigNoImage);

...since each selector is different they will only use the textareas with the appropriate classes such as these:

<textarea name="imageTextArea" class="editorWithImage"></textarea>  
<textarea name="noImageTextArea" class="editorWithoutImage"></textarea>

Upvotes: 1

Related Questions