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.
1
2
3
4
5
// 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.
1
2
3
4
5
6
7
8
9
10
11
12
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();
}