Button TinyMCE 4.0+；单击'；自定义格式'；文本

我在tinyMCE 4.0+中添加了一个自定义按钮/插件，它用一个特定的标记阻止了我的文本。例如：

my clicked text

。除了按钮无法启动之外，一切都很好。当它激活时，当我点击已经格式化的文本时，它不会激活（就像点击粗体文本时粗体按钮一样）

多亏了Stackoverflow的无数建议，而且由于完全没有合适的解决方案（这里和tinyMCE文档中），我想在这里发布解决方案。尽管您可以添加任何想要的标记，但出于本例的目的，我将添加

标记：

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

---

我想用元素的类而不是节点类型来实现这一点。 这是我的解决方案（使用jQuery，它已经包含在内了-这是Wordpress构建）

和css：

.top_margin{ 
    margin-top: 1rem;
}

---

嘿，谢谢@ilPittiz，正是因为这样的原因，我才喜欢这个论坛谢谢@Mike，我喜欢这个页面的发展方向……有时候很难找到tinyMCE的可靠解决方案……希望这个页面能帮助一些人。

.top_margin{ 
    margin-top: 1rem;
}