Adding Plugins to TinyMCE

Place the Plugin Source Files 

If including a new 3rd party plugin, you must add the plugin's files to the plugin directory. The plugin folder should be copied to rx_resources/tinymce/js/tinymce/plugins.

Documentation for default plugins that are available with TinyMCE can be found here: http://www.tinymce.com/wiki.php/Plugins .  Plugins should be compatible with TinyMCE 4.

Advanced plugins such as the MCFileManager and MCImageManager will require specialized server customizations in order to the them to work. 

TinyMCE plugins are provided as a folder containing a plugin.min.js and/or a plugin.js file.  The min version is typically a minified version of the plugin.js file.

The Editor will only use the plugin.js file contained in this folder.  If the plugin did not provide this file, the plugin will not load.  In the event a plugin only provides a plugin.min.js file.  The plugin.min.js can be copied or symbolic linked to a file named plugin.js.  A more complex feature may provide more than one plugin, refer to the 3rd Party plugin documentation for more information.

Configure TinyMCE to use plugin.

The plugin name should be added to the list of plugins on the TinyMCE "plugins" Key in the rx_resources\tinymce\js\config\default_config.json file.

The rx_resources\tinymce\js\config\default_config.json file should also be used to customize the default plugins and toolbar properties. The plugin documentation will probably talk about setting these values in the tinymce.init({ section.  They should be instead set in the default_config.json file.

 Remember to validate the file using JSONLint or another service,  and make sure that the property names are enclosed in double quotes.  

For Example:

"plugins":["myplugin advlist autolink lists link charmap print preview hr anchor pagebreak",

 "searchreplace wordcount visualblocks visualchars code fullscreen",

 "insertdatetime media nonbreaking save table contextmenu directionality",

 "emoticons template paste textcolor",

 "noneditable rxinline"]

The plugin may be added to the toolbar.  Place the plugin or plugin toolbar item name to the toolbar at the location required.  

For Example:

"toolbar":"myplugin | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | link | print preview media | forecolor backcolor emoticons | rxinlinelink rxinlinetemplate rxinlineimage"

Multiple toolbars can be created if required by setting to toolbar1, toolbar2, toolbar….  properties

Example:

"toolbar1":"myplugin | insertfile undo redo | styleselect | bold italic",

"toolbar2":"alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | link | print preview media | forecolor backcolor emoticons | rxinlinelink rxinlinetemplate rxinlineimage"

A simple default_config.json only adding a new plugin and toolbar icon is listed below:

{

 "plugins": [

 "myplugin advlist autolink lists link charmap print preview hr anchor pagebreak",

 "searchreplace wordcount visualblocks visualchars code fullscreen",

 "insertdatetime media nonbreaking save table contextmenu directionality",

 "emoticons template paste textcolor",

 "noneditable rxinline"

 ],

 "toolbar":"myplugin | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | link | print preview media | forecolor backcolor emoticons | rxinlinelink rxinlinetemplate rxinlineimage",

 "plugin_prop_1":true,

 "plugin_prop_2": {

 "sub_prop_2":true

   }

}

The plugin may have its own configuration options.  These can be added into the json file e.g. plugin_prop_1 and plugin_prop_2 above.  See the plugin documentation for a list of available init properties.