Knowledge Base

Migrating TinyMCE plugins to version 5

Last Modified:
02 Mar 2022
User Level:
Administrator

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:

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

TinyMCE5 Menu Item

Here's an example of how to register a toolbar menu:

editor.ui.registry.addButton('t4media', {
  text: '',
  icon: 'image',
  onAction: function () {
    //Your method
  }
});

TinyMCE5 Toolbar item

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

TinyMCE5 Nested Menu

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