TinyMCE 4 Toolbar Button Status

Question

What is the easiest way to switch the state of a button on a toolbar (for example, it works with bold default)? I can’t “get” this class, I Tinymce, which changes the appearance of the button from the selected by default. This is my plugin code (simplified):

tinymce.PluginManager.add('myplugin', function (editor) { editor.addButton('mybutton', { text: false, image: 'someimage.png', onclick: function () { /* Toggle this toolbar button state to selected (like with the tinymce bold-button)*/ /* and of course some other code goes here */ } }); }); 

Answer 1

After some attempts, I came to the conclusion that onclick will not do the job here. After a few hours, I ended up with this solution, which stitches perfectly in Tinymce 4.x:

 /* In the timymce > plugins, name your pluginfolder "my_crazy_plugin" and plugin file as "plugin.min.js" */ /* Your plugin file: plugin.min.js */ tinymce.PluginManager.add('my_crazy_plugin', function(editor) { var state; /* Actions to do on button click */ function my_action() { state = !state; /* Switching state */ editor.fire('mybutton', {state: state}); if (state){ alert(state); /* Do your true-stuff here */ } else { alert(state); /* Do your false-stuff here */ } } function toggleState_MyButton() { var self = this; editor.on('mybutton', function(e) { self.active(e.state); }); } /* Adding the button & command */ editor.addCommand('cmd_mybutton', my_action); editor.addButton('mybutton', { image: 'tinymce/plugins/my_crazy_plugin/img/some16x16icon.png', title: 'That Bubble Help text', cmd: 'cmd_mybutton', onPostRender: toggleState_MyButton }); }); /* Your file with the tinymce init section: */ tinymce.init({ plugins: [ "my_crazy_plugin" ], toolbar: "mybutton" }); 

Answer 2

If someone else finds this article for this problem, I found a slightly simpler way to do this using onclick in 4.0.16:

 /* In the timymce > plugins, name your pluginfolder "my_crazy_plugin" and plugin file as "plugin.min.js" */ /* Your plugin file: plugin.min.js */ tinymce.PluginManager.add('my_crazy_plugin', function(editor) { /* Actions to do on button click */ function my_action() { this.active( !this.active() ); var state = this.active(); if (state){ alert(state); /* Do your true-stuff here */ } else { alert(state); /* Do your false-stuff here */ } } editor.addButton('mybutton', { image: 'tinymce/plugins/my_crazy_plugin/img/some16x16icon.png', title: 'That Bubble Help text', onclick: my_action }); }); /* Your file with the tinymce init section: */ tinymce.init({ plugins: [ "my_crazy_plugin" ], toolbar: "mybutton" }); 

Answer 3

In TinyMCE 4, you can use the simpler stateSelector parameter:

 editor.addButton('SomeButton', { text: 'My button', stateSelector: '.class-of-node' // or use an element (an id would probably work as well, but I haven't tried it myself) }); 

Or you can use custom logic using the "exchangechange" event

 editor.addButton('SomeButton', { text: 'My button', onPostRender: function() { var ctrl = this; ed.on('NodeChange', function(e) { ctrl.active(e.element.nodeName == 'A'); }); } }); 

Link: https://www.tinymce.com/docs/advanced/migration-guide-from-3.x/#controlstates

Answer 4

The first fire condition change in your team:

 editor.fire('FullscreenStateChanged', {state: fullscreenState}); 

On onPostRender change button status button:

 onPostRender: function() { var self = this; editor.on('FullscreenStateChanged', function(e) { self.active(e.state); }); }