↓Skip to main content

Accessing TinyMCE 4 Controller State

··1 min

I’ve been using TinyMCE a lot on a recent project and discovered some helpful tips if you need to control the state of UI elements on an editor.

Accessing theme controllers #

You can access the controllers of the toolbar and menu items of a theme by using. This will only work after the theme is rendered on the page.

// Get menu bar controllers
tinymce.activeEditor.theme.panel.find('menubar *');

// Get toolbar controllers
tinymce.activeEditor.theme.panel.find('toolbar *');

Each will return an object with numerical keys which you can then modify like so.

var toolbarItems = tinymce.activeEditor.theme.panel.find('toolbar *');

toolbarItems[0].disabled(true);
toolbarItems[0].disabled(false); // enable

toolbarItems[0].visible(true);   // show
toolbarItems[0].visible(false);
toolbarItems[0].show();          // same as above
toolbarItems[0].hide();

toolbarItems[0].active(true);
toolbarItems[0].active(false);   // inactive

Controllers on menu and button items #

The only way I’ve found to handle the state after creating a custom button or menu item is with the postRender method. The controller will always be bound to this within the postRender function.

editor.addButton('example', {
    text: 'My button',
    icon: false,
    postRender: function() {
        var ctrl = this;
        myFunction(ctrl);
        myOtherFunction.call(ctrl);
        ctrl.active(true);
    }
 });

function myFunction(ctrl){
    ctrl.disabled(true);
}

function myOtherFunction(){
    this.hide();
}