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',

TinyMce v5自定义插件

1 个答案: