TinyMCE adds toggle style

Question

I am working on a TinyMCE plugin, and one thing I want to do is register commands / buttons that switch custom formatting.

For example, if you press the bold button in TinyMCE, it will display the bold in bold. Delving into the source code, I see this happening through: tinymce.EditorCommands.addCommands thought I couldn't figure out how to duplicate it. The TinyMCE documentation is also terrible :(

Thus, for customFormat, I want to be able to customize the buttons with my plugin when, when using customFormat, it appears like Bold, Italics and other similar buttons on the toolbar. And clicking on my customFormat toggles this format on / off. I can easily execute toogle via "addCommand" and "addButton", but then it does not have state tracking like Bold and others.

Showing my current non-working attempt (this code is inside the init of my plugin creation method):

tinymce.EditorCommands.call('addCommands', { 'MyFormat' : function(name) { ed.formatter.toggle("customFormat"); } },'exec'); tinymce.EditorCommands.call('addCommands', { 'MyFormat' : function(name) { return ed.formatter.match('customFormat'); } },'state'); ed.addButton('customformat', {cmd : 'MyFormat'}); 

And here is the link to addCommands "documentation": http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

After looking around a lot, I found this one that seems perfect: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

But when I implement the code, it does not change the state of the button:

  ed.addCommand('MyFormat', function(ui, v) { ed.formatter.toggle("thoughtFormat"); }); ed.addQueryStateHandler('MyFormat', function() { return ed.formatter.match('thoughtFormat'); }); ed.addButton('myformat', {cmd : 'MyFormat'}); 

Answer 1

In case someone doesn’t want to do this in a “plug-in way”, here is a guide for TinyMCE 4.x

First of all, you need to define a custom format:

 formats: { custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}} } 

Then you need to add a button to the toolbar:

 toolbar: "mybutton", 

Next, you need to configure the button so that it switches the format:

 setup: function(editor) { editor.addButton('mybutton', { text: 'My button', icon: false, onclick: function() { tinymce.activeEditor.formatter.toggle('custom_format') } }); } 

In addition, if you want the editor to set the state of the button to indicate the format of the current node, automatically add this to the setup function:

 onPostRender: function() { ctrl = this, editor.on('NodeChange', function(e) { ctrl.active(e.element.className == "some_css_class") }); } 

Your tinymce.init function should look like this:

 tinymce.init({ selector: "textarea", formats: { // Other formats... custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}} } // Other default toolbars toolbar_n: "mybutton", // Finally, setup your button setup: function(editor) { editor.addButton('mybutton', { text: 'My Button', icon: false, onclick: function() { tinymce.activeEditor.formatter.toggle('custom_format') }, onPostRender: function() { ctrl = this, editor.on('NodeChange', function(e) { ctrl.active(e.element.className == "some_css_class") }); } }); } 

Note that I added the class attribute to my custom format. This approach allowed me to define my custom styles in a separate stylesheet file and keep my markup as dry as possible (no inline styles!). Point the content_css parameter to your stylesheet and everything will be fine. However, due to the fact that I use Rails as the back-end and BatmanJS as the front-end (and I'm pretty new to the latter), I could not understand how resource routing works, and in the end I added my own custom styles for the file the default content styles of the tinyMCE skin itself (located in skins/SKIN_NAME/content.min.css ).

Answer 2

Thanks to Thariama for the understanding that allowed me to dig deeper, finally figure out how to do this. I'm not sure if this is the “right way”, but, as I said, TinyMCE has the worst documentation you can imagine.

The key for me was to make the hook an onNodeChange event using the setActive trick. A complete sample plugin with a custom button that activates when this format is present wherever the cursor is:

 (function() { tinymce.create('tinymce.plugins.CoolPlugin', { init : function(ed, url) { ed.addCommand('MyFormat', function(ui, v) { ed.formatter.toggle("myFormat"); }); ed.addButton("coolformat", { title : 'MyFormat Tooltip', cmd : 'MyFormat', image: url + '/coolformat.png', }); ed.onNodeChange.add(function(ed, cm, n) { active = ed.formatter.match('myFormat'); control = ed.controlManager.get('coolformat').setActive(active); }); ed.onInit.add(function(ed, e) { ed.formatter.register('myFormat', {inline: 'span', classes : ['cool'] } ); }); } }); // Register plugin tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin); })(); 

Answer 3

Here is an example:

 ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever