单击“自定义格式”文本时,TinyMCE 4.0自定义按钮处于活动状态和非活动状态

我在tinyMCE 4.0中添加了一个自定义按钮/插件,格式化了我的文本和特定标签.例如:< h1>我点击的文字< / h1>.一切都很好,除了按钮不会激活的事实.当它激活时,当我点击已经格式化的文本时,它就不会激活(就像点击粗体文本时的粗体按钮一样).

感谢Stackoverflow提出的无数建议,以及完全没有合适的解决方案(这里和tinyMCE文档),我想在这里发布解决方案.虽然您可以添加任何您喜欢的标记,但为了本示例的目的,我将添加< h1>标签:

//Add the plugin to tinyMCE.init
tinymce.init({
    selector: \"div.editable\",
    inline: true,
    plugins: 'addh1s'
    toolbar: 'addh1s'
 //etc...
});

//Then create a folder entitled, 'addh1s' in the tinyMCE 'plugins' folder
//and add the plugin.min.js file that contains the following code.
//*Please note that the number '27' below is the number in order of the 
//'addh1s' button on my tinyMCE toolbar.  In your case it can be the
//number of where your button appears on your toolbar.

tinymce.PluginManager.add('addh1s', function(editor, url) {
    editor.addButton('addh1s', {
        title: 'Add H1 tags',
        image: '../images/h1.png',
        onPostRender: function() {
            editor.on('NodeChange', function(e) {
                if (editor.formatter.match('h1')) {
                tinymce.activeEditor.theme.panel.find('toolbar *')[27].active(true);
                }
                else {
                tinymce.activeEditor.theme.panel.find('toolbar *')[27].active(false);
                }
            });
            },
        onclick: function() {
            tinyMCE.activeEditor.execCommand('FormatBlock', false, 'h1');
        }
    });

});

我希望这可以为你节省无数令人沮丧的时间!

最佳答案
这正是我想要的! (但是我试图去那里度过了几个令人沮丧的时间:P)

只是想记下一个更可靠和通用的方法,我发现识别按钮,摆脱第28个按钮的自定义.

onPostRender: function() {
    var _this = this;   // reference to the button itself
    editor.on('NodeChange', function(e) {
        _this.active(editor.formatter.match('h1'));
    })
}

转载注明原文:单击“自定义格式”文本时,TinyMCE 4.0自定义按钮处于活动状态和非活动状态 - 代码日志