javascripttinymcetinymce-5

TinyMce v5 Custom Plugin


I'm trying to create a custom plugin for TinyMce.

This is my code so far:

(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));
})();

This is my init:

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

My editor renders without any button and no JS error on it.
What am I doing wrong? I tried to emulate some of the plugins but I cant get it to work.

tinymce with no buttons


Solution

  • Seems that I needed to search a little bit more in the documentation. I have to add each button manually to the toolbar:

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

    and each name should be unique for the plugin:

    So, the code for my plugin:

    (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));
    })();
    

    If you want to add more buttons to the toolbar, you have to put them one by one:

    toolbar: 'redactorBtn1 redactorBtn2',