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

Question

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

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

Answer 1

最后我想出了一个正确的方法。

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

就是这样！不应呈现新的自定义控件。插件代码只有运行一次；即使多次使用。

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

How to add a custom control to the TinyMce 4 toolbar

plugins

controls

tinymce-4