0

我正在尝试为 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 错误。
我究竟做错了什么？我试图模拟一些插件，但我无法让它工作。

没有按钮的tinymce

4

2 回答 2

0

似乎我需要在文档中进行更多搜索。我必须手动将每个按钮添加到工具栏：

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',
于 2019-03-14T06:41:52.543 回答
0

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

于 2021-10-25T15:01:14.613 回答