Currently, I am in the process of developing my own plugin to integrate into the list of TinyMCE v4 plugins. So far, I have successfully added a button to the menu that opens a pop-up when clicked. In this pop-up, users can input data which is then added to the TinyMCE editor. However, I am encountering some issues when trying to edit this information. I have attempted to add additional scripts but they have not resolved the issue.
Below is a snippet of my source code:
Note 1: The onclick function works for adding a new button.
Note 2: The onpostrender function is intended for editing the button.
tinymce.PluginManager.add('buttonlink', function(editor, url) {
// Add a button that opens a window
editor.addButton('buttonlink', {
text: 'Insert Button',
tooltip: "Insert/edit Button link",
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Button',
body: [
{type: 'textbox', name: 'title', label: 'Title'},
{type: 'textbox', name: 'link', label: 'Link'},
{type: 'listbox', name: 'colorBtn', label: 'Button Color',values:
[...]
},
{type: 'listbox', name: 'colorText', label: 'Text Color',values:
[...]
},
],
onsubmit: function(e) {
if(e.data.title != null && e.data.title != "") {
editor.insertContent('<a href="' + e.data.link + '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + e.data.colorText + '; background: #' + e.data.colorBtn + '">' + e.data.title + '</a>');
}
}
});
},
onpostrender: function (buttonApi) {
var btn = this;
var editorEventCallback = function (e) {
[...]
};
editor.on('NodeChange', editorEventCallback);
return function (buttonApi) {
console.log("off");
editor.off('NodeChange', editorEventCallback);
}
}
});
return {
getMetadata: function () {
return {
name: "Button Link plugin",
url: "https://capoffshore.com"
};
}
};
});
This is an example of the pop-up used for creating a new button: