Accessing TinyMCE 4 Controller State

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();
}