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