TinyMce v5 Custom Plugin

Question

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.

score 0 · Accepted Answer · edited Jun 17 '19 at 09:00

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

score 0 · Answer 2 · answered Oct 25 '21 at 15:01

Its old code, at tinyMCE they change everything now and then. A good example is the code plugin. Copy this code plugin to a directory named: custom. Change the names code in the plugin.js file to custom and add custom to the plugins array and the toolbars string in tinymce.init function and you are ready to go.

TinyMce v5 Custom Plugin

2 Answers2