Пользовательский плагин 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 в plugin.js файл и добавить custom в массив плагинов и строку панелей инструментов в tinymce.init функции, и вы готовы к работе.