Migrating TinyMCE plugins to version 5
From version 8.3.12, Terminalfour has been upgraded to use v5.8.2 of the TinyMCE editor.
The majority of Terminalfour’s TinyMCE plugins are built on top of an existing Tiny plugin. There are two ways to go about it:
- Rewrite an existing plugin – add existing code on top of an existing plugin to add more features on either of their dev or compiled versions of the code (a good understanding of JavaScript is required). Download the dev package here.
- Create a brand new plugin from scratch by following the steps on Tiny’s website
In this article, we'll be looking at ways to rewrite an existing plugin.
Rewriting an existing plugin
The following is a summary of things to consider when rewriting an existing TinyMCE4 plugin.
Context menus
The context menu can be added in a custom plugin through this new method:
editor.ui.registry.addContextMenu();
UI configuration settings
The API methods for registering UI components (toolbar button, menu item, etc) have moved and there are new and changed methods.
Here's an example of how to register a menu item:
editor.ui.registry.addMenuItem('t4media', {
text: 'Insert file link or image',
icon: 'image',
onAction: function () {
//Your method
}
});
Here's an example of how to register a toolbar menu:
editor.ui.registry.addButton('t4media', {
text: '',
icon: 'image',
onAction: function () {
//Your method
}
});
Here's an example of how to register a nested menu:
editor.ui.registry.addNestedMenuItem('link', {
icon: 'link',
text: 'Insert link',
getSubmenuItems: function() {
return [
{
type: 'menuitem',
icon: 'folder',
text: 'title',
onAction: function () {
//Your method
}
},
{
type: 'menuitem',
icon: 'new-document',
text: 'title',
onAction: function () {
//Your method
}
}, //Add more objects here to populate the dropdown
];
}
});
Dialog components
There are also changes to how custom dialogs are added to a custom plugin.
Here's an example of how a dialog box was registered in TinyMCE4:
editor.windowManager.open({
title: 'Some title',
data: data, //Some JSON data
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: [ {
type: 'form',
layout: 'grid',
columns: 2,
defaults: {
type: 'textbox'
},
items: buildForm(data)
} ]
} ],
onsubmit: function () {
}
});
Here's how that looks in TinyMCE5:
editor.windowManager.open({
title: 'Some title',
initialData: updatedData, //Some JSON data
body: { type: 'panel',
items: [
{
type: 'grid',
columns: 2,
items: buildForm(updatedData) //updatedData is some JSON data
}
]
},
buttons: [
{
type: 'cancel',
name: 'closeButton',
text: 'Cancel'
},
{
type: 'submit',
name: 'submitButton',
text: 'Save',
primary: true
}
],
onCancel: (dialogApi)=> {
},
onSubmit: function (dialogApi) {
}
});
You can learn more about customizing the body of a modal at the TinyMCE page on dialog components.
Back to top