如何向TinyMce 4工具栏添加自定义控件

Question

我想向TinyMce引入一个新Control ，我可以在工具栏中使用它。 就我而言，我想添加一个图标控件，该控件可以放置在工具栏的开头，以区分编辑器。

但是，几乎没有有关如何正确执行此操作的信息。

Answer 1

最终，我设法提出了一种正确执行此操作的方法。

首先，我介绍一个新的插件icon （ 在icon/plugin.js ），该icon/plugin.js注册了一个新的控件Icon 。 它使用设置iconClass 。

tinymce.PluginManager.add('icon', function() {
    tinymce.ui.Icon = tinymce.ui.Widget.extend({
        renderHtml: function () {
            return '<span class="icon icon-' + this.settings.iconClass + '"> </span>';
        }
    });
});

接下来，我通过以下方式将按钮 facebook添加到工具栏：

editor.addButton('facebook', {
    type: 'icon',
    iconClass: 'facebook-share'
});

现在，我可以将其添加到工具栏规范中：

tinymce.init({
    toolbar: "facebook"
})

而已！ 新的自定义控件不应呈现。 插件代码只运行一次； 即使多次使用。