Load resp. unload Plugin or MenuItem using the TinyMCE API

Question

I am using TinyMCE 4.0.x, API4 for a project at work. I have some simple custom plugins like:

tinymce.PluginManager.add('simplePlugin', function(editor, url) {
    editor.addButton('simplePluginButton', { 
        text: 'Simple Example', 
        icon: false, 
        onclick: function() { alert('Do something...'); } });

    editor.addMenuItem('simplePluginMenuItem', { 
        text: 'Simple Example', 
        context: 'tools', 
        onclick: function() { alert('Do something...'); } });
});

I want to load resp. unload the Plugin-MenuItem and the Plugin-Button (or the Plugin itself!) on the fly using the TinyMCE API and the button resp. item resp. plugin name (in my case simplePluginMenuItem and simplePluginButton or simplePlugin).

The problem i am facing is that i can't reach/find the Plugin OR the MenuItem / Toolbar-Button using the API!

I tried different ways with no success! For example:

• i can get and modify the list of the plugins using tinymce.activeEditor.plugins, but then how do i reload the editor using the API?
• the tinymce.ui namespace has a MenuItem class, that has a remove method - how do i find the MenuItem through the API? When i call tinymce.activeEditor.editorManager.ui.Menu i am getting the class and not the current menu instance! Is there a way to retrieve the current menu instance using the API?
• the editor instance has a lot of properties, but none of them is for the menu or the toolbar.

Am i missing something? Is there a way at all using the API to retrieve the MenuItem or the ToolbarButton or could the API be used only for creating new editor items resp. components?

Something like this pseudocode:

tinymce.activeEditor.getActiveMenu.findMenuItem('simplePluginMenuItem').remove();

I found this old SO post, but at the time (year 2009) the question was asked the API Version 4.0.x was not yet released.

Answer 1

One possible solution that i found, would be to give the toolbar button and the menu item of the custom plugin, unique id of the containing div element:

tinymce.PluginManager.add('simplePlugin', function(editor, url) {
    editor.addButton('simplePluginButton', { 
        id  : 'simplePluginButton001',
        text: 'Simple Example', 
        icon: false, 
        onclick: function() { alert('Do something...'); } });

    editor.addMenuItem('simplePluginMenuItem', {
        id  : 'simplePluginMenuItem001',    
        text: 'Simple Example', 
        context: 'tools', 
        onclick: function() { alert('Do something...'); } });
});

Now the generated HTML code inside the TinyMCE editor looks like this:

<div    id="simplePluginButton001"
        role="button" 
        class="mce-widget mce-btn mce-first mce-last" 
        tabindex="-1" 
        aria-labelledby="simplePluginButton001">
            <button 
                role="presentation" 
                type="button" 
                tabindex="-1">
                    Simple Example
            </button>
</div>

and the div element containers could be retrieved and manipulated directly (for example using jQuery):

var pluginToolbarButton = $("#simplePluginButton001");
pluginToolbarButton.hide();
//pluginToolbarButton.show();
//pluginToolbarButton.remove();

This works just fine for my case - i can build lists of menu item resp. toolbar button id's, that should be made invisible resp. visible.

Nevertheless i wish i could have used the API for such operations - IMO it is more elegant and it seems right.