TinyMce v5 自定义插件

Question

我正在尝试为 TinyMce 创建自定义插件。

到目前为止，这是我的代码：

(function() {
  var redactor = (function(domGlobals) {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');

    var setupButtons = function(editor) {
      editor.ui.registry.addToggleButton('link', {
        text: 'My button',
        tooltip: 'My button',
        onAction: function() {
          alert('My Button');
        }
      });
    };

    var Controls = {
      setupButtons: setupButtons,
    };

    global.add('redactor', function(editor) {
      Controls.setupButtons(editor);
    });

    function Plugin() {}

    return Plugin;
  }(window));
})();

这是我的初始化：

tinymce.init({
    selector: '#editor',
    plugins: 'redactor',
    toolbar: 'redactor',
    menubar: 'redactor'  
});

我的编辑器渲染时没有任何按钮，也没有 JS 错误。
我究竟做错了什么？我试图模拟一些插件，但我无法让它工作。

Answer 1

看来我需要在文档中多搜索一点。我必须手动将每个按钮添加到工具栏：

tinymce.init({
    selector: '#editor',
    plugins: 'redactor',
    toolbar: 'redactorBtn1',
    menubar: 'redactor'  
});

并且插件的每个名称都应该是唯一的：

所以，我的插件代码：

(function () {
var redactor = (function (domGlobals) {
    'use strict';
    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');

    var setupButtons = function (editor) {
        editor.ui.registry.addToggleButton('redactorBtn1', {
            text: 'My button',
            tooltip: 'My button',
            onAction: function () {
              alert('My Button');
            }
        });
    };

    var Controls = {
      setupButtons: setupButtons,
    };

    global.add('redactor', function (editor) {
        Controls.setupButtons(editor);          
    });
    function Plugin () {
    }

    return Plugin;
}(window));
})();

如果要在工具栏中添加更多按钮，则必须将它们一一放置：

toolbar: 'redactorBtn1 redactorBtn2',

Answer 2

它的旧代码，在 tinyMCE 他们不时更改所有内容。一个很好的例子是 code 插件。将此 code 插件复制到名为：custom 的目录中。将 plugin.js 文件中的名称 code 更改为 custom 并将 custom 添加到插件数组和 tinymce.init 函数中的工具栏字符串，您就可以开始了.

TinyMce v5 自定义插件

TinyMce v5 Custom Plugin

javascript

tinymce

tinymce-5