TinyMCE 4 切换工具栏按钮状态答案

【问题标题】：TinyMCE 4 toggle toolbar button stateTinyMCE 4 切换工具栏按钮状态
【发布时间】：2013-11-09 16:42:26
【问题描述】：

切换工具栏按钮状态的最简单方法是什么（就像它使用默认的粗体按钮一样）？我无法“获得”将按钮外观从默认更改为选中的 Tinymce 类。这是我的插件代码（简化）：

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 */
        }
    });
});

【问题讨论】：

标签： button tinymce toggle toolbar

【解决方案1】：

在 TinyMCE 4 中，您可以使用更简单的 stateSelector 设置：

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

或者您可以使用“nodechange”事件来使用自定义逻辑

editor.addButton('SomeButton', {
    text: 'My button',
    onPostRender: function() {
        var ctrl = this;

        ed.on('NodeChange', function(e) {
            ctrl.active(e.element.nodeName == 'A');
        });
    }
});

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

【讨论】：

【解决方案2】：

如果其他人发现这篇文章解决这个问题 - 我找到了一种更简单的方法，使用 4.0.16 中的 onclick：

/* 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"
});

【讨论】：

【解决方案3】：

经过一番摆弄后，我得出结论，onclick 不会在这里完成这项工作。几个小时后，我最终得到了这个解决方案，它在 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"
});

【讨论】：

这是完美的解决方案！

【解决方案4】：

您的命令中的第一次触发状态更改：

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

OnPostRender 按钮 onPostRender 改变按钮状态：

onPostRender: function() {
    var self = this;

    editor.on('FullscreenStateChanged', function(e) {
        self.active(e.state);
    });
}

【讨论】：