button - TinyMCE 4.0+ 自定义按钮在单击 'Custom Formatted' 文本时处于事件状态和非事件状态

Question

我向 tinyMCE 4.0+ 添加了一个自定义按钮/插件，它使用特定标签格式化了我的文本。例如:<h1>my clicked text</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');
        }
    });

});

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

Answer 1

这正是我要找的! (但是我在尝试到达那里时花了几个令人沮丧的小时:P)

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

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