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

Question

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

然而，几乎没有关于如何正确执行此操作的信息。

Answer 1

最后，我设法找到了正确执行此操作的方法。

首先，我介绍一个新插件icon（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"
})

那就是它！新的自定义控件不应呈现。插件代码只运行一次;即使多次使用。