toggleClass function in TinyMCE API 3?

Question

TinyMCE 4 has a handy toggleClass function, http://archive.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.toggleClass which I'd like to use, but this particular project icorporates the older TinyMCE 3.5.11 ..

I'd hoped that the following would work in v3:

tinymce.create('tinymce.plugins.ClassToggle', {
    createControl: function(n, cm) {
        switch (n) {
            case 'exampleclasstoggle':
                var exampleclasstoggle = cm.createButton('exampleclasstoggle', {
                    title : 'Toggle example class',
                    image : '/admin/js/icons/exampleclass.png',
                    onclick : function(v) {
                        cm.editor.selection.toggleClass('example');
                    }
                });

                return exampleclasstoggle;
        }
    }
});

tinymce.PluginManager.add('classtoggle', tinymce.plugins.ClassToggle);

But it's just throwing errors that toggleClass() isn't a function so clearly the v3 API just doesn't offer this.

Does anybody know of a plugin for TinyMCE 3 that provides a toggleClass() or similar, or is there a better way of doing this?

I literally just want to add buttons to the editor for toggling a couple of pre-defined classes on whatever element is selected.

Regards.

score 0 · Answer 1 · answered Aug 26 '16 at 14:01

0

Here is the code from TinyMCE 4 for toggleClass:

    toggleClass: function(elm, cls, state) {
        this.$$(elm).toggleClass(cls, state).each(function() {
            if (this.className === '') {
                $(this).attr('class', null);
            }
        });
    }

Just add this function to your code and pass it the right parameters.

(This is in the DOMUtils.js file in TinyMCE 4)

answered Aug 26 '16 at 14:01

Michael Fromin

13,131
2
20
31

Thanks Michael. I couldn't figure out a way of using this without hacking it into the core TinyMCE files but it got me thinking that I should be able to use jQuery for this instead, which in turn got me looking at the tinymce.dom API that I eventually used for a working answer. – Ric Aug 26 '16 at 15:18

score 0 · Accepted Answer · answered Aug 26 '16 at 15:15

Managed to do it using the tinymce.dom API to access hasClass, addClass and removeClass functions...

tinymce.create('tinymce.plugins.ClassToggle', {
    createControl: function(n, cm) {
        switch (n) {
            case 'exampleclasstoggle':
                var exampleclasstoggle = cm.createButton('exampleclasstoggle', {
                    title : 'Toggle example class',
                    image : '/admin/js/icons/exampleclass.png',
                    onclick : function(v) {
                        if(cm.editor.dom.hasClass(cm.editor.selection.getNode(), 'example')) {
                            cm.editor.dom.removeClass(cm.editor.selection.getNode(), 'example');
                        } else {
                            cm.editor.dom.addClass(cm.editor.selection.getNode(), 'example');
                        }
                    }
                });

                return exampleclasstoggle;
        }
    }
});

tinymce.PluginManager.add('classtoggle', tinymce.plugins.ClassToggle);

toggleClass function in TinyMCE API 3?

2 Answers2