TinyMCE API 3 中的 toggleClass 函数？

Question

TinyMCE 4 有一个方便的 toggleClass 函数，http://archive.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.toggleClass 我想使用它，但是这个特定项目合并了旧的 TinyMCE 3.5.11 ..

我希望以下内容在 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);

但它只是抛出错误，toggleClass() 不是一个函数，所以很明显 v3 API 只是不提供这个。

有人知道提供 toggleClass() 或类似功能的 TinyMCE 3 插件吗？或者有更好的方法吗？

我真的只是想向编辑器添加按钮，以便在选择的任何元素上切换几个预定义的类。

此致。

Answer 1

这是来自 TinyMCE 4 的 toggleClass 代码：

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

只需将此函数添加到您的代码中并向其传递正确的参数即可。

（在 TinyMCE 4 的 DOMUtils.js 文件中）

Answer 2

设法使用 tinymce.dom API 访问 hasClass、addClass 和 removeClass 函数...

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

TinyMCE API 3 中的 toggleClass 函数？

toggleClass function in TinyMCE API 3?

javascript

tinymce

tinymce-4

tinymce-3