Knowledge Base

Creating a Tiny MCE plugin

Last Modified:
01 Oct 2019
User Level:
Administrator

Description

This article covers creating a custom TinyMCE plugin that can be used with TERMINALFOUR's HTML Editor. 

Creating a plugin

TERMINALFOUR's HTML Editor is built with TinyMCE 4 so you can use the plugins that are compatible with this version. In addition to the plugins pre-installed with your TERMINALFOUR instance, you can also create custom plugins too.

There are details on how to create a plugin are on the TinyMCE site including this sample plugin code.

Basics

Create a directory. The name of the directory and the reference name for the plugin used in the script must match. For TERMINALFOUR to recognize custom plugins, the name of the plugin directory with "_CP". TERMINALFOUR will append "_CP" after the plugin folder name if you don't add it. 

In the directory, add a file called "plugin.js" and a minified version of the file called "plugin.min.js".

The reference name of the plugin in the "plugin.js" file must also be appended with "_CP":

tinymce.PluginManager.add('myCustomPlugin_CP', function(editor, url) {})

TinyMCE matches the folder name to the plugin name for loading, therefore both need to be "_CP" in order for it to show in the editor.

TinyMCE custom plugin folder structure and reference name

If you don't have a minified version of the plugin and TERMINALFOUR is running in minified mode, a 403 error will be thrown on TinyMCE load. Either create a minified version of your file and name it plugin.min.js or simply duplicate your plugin file and name it plugin.min.js

When you have written your plugin, zip the folder and upload it to System Administration > Hierarchy & Content Settings > HTML Editor.

Don't add the root folder to another folder and don't use spaces in the plugin's root folder.

Multiple plugins

If you have multiple custom plugins you can zip them & upload them together. Each plugin should have its own root folder and reference name as above. Select all of the plugin folders, right-click and zip them.


Don't add them to a single folder and zip and don't use spaces in the plugin's root folder.Upload the zip to System Administration > Hierarchy & Content Settings > HTML Editor as per single upload.