Adding Plugins to the CKEditor

The CKEditor is the editor that is used for editing pages, border areas, head code, custom CSS and files. For editing pages and border areas, the editor can be used in either design view or code view. For editing head code, custom CSS or files, the editor is used only in code view. Because many plugins are only relevant in design view, and some are only relevant in code view, there are two configuration files provided adding plugins. For adding plugins for design view (editing pages and border areas), the file you need to edit is /manage/plugins/ckeditor_plugins.php. For adding plugins for code view (editing head code, custom CSS or files), the file you need to edit is /manage/plugins/ckeditor_plugins_no_design.php. Note that if you want to add code-view type plugin for editing pages or border areas in code view, you must add it to /manage/plugins/ckeditor_plugins.php. They are generally not a problem is design view as they will not be active.

To start, download (or develop) your FCKEditor plugin from here: https://ckeditor.com/cke4/addons/plugins/all. Unzip the plugin you want to add, and FTP the files to /ckeditor/plugins/. Make sure all of the plugin files stay inside of their own plugin folder. i.e. Easy Image would be uploaded to /ckeditor/plugins/easyimage/. Next, add your plugin to the comma-separated list in CKEDITOR.config.extraPlugins. In cases where you are replacing a built-in plugin with a new plugin, you will also need to remove the plugin being replaced using CKEDITOR.config.removePlugins. In the case of the Easy Image plugin, you will need to remove the 'image' plugin.

In the case of Easy Image, you will also need to obtain a URL token and an upload token. You can obtain those tokens here: https://docs.ckeditor.com/cs/latest/guides/easy-image/quick-start.html.

This module is used in the editors that have both a design view mode and a code view mode. This includes the page editor and the border area editor. For customizing the editors for head code, custom CSS, and direct file editing, see ckeditor_plugins_no_design_view.php.

Below is an example for Easy Image (you will need to use your own tokens):

CKEDITOR.config.extraPlugins = 'zoom,letterspacing,codemirror,easyimage';
CKEDITOR.config.removePlugins = 'image';
CKEDITOR.config.cloudServices_tokenUrl = 'https://16600.cke-cs.com/token/dev/nTYDBnd18iUufeKU00Ed58FQPZh9IBxnYSzKaLaxuagmcav9Y1szsEXff0Pc';
CKEDITOR.config.cloudServices_uploadUrl = 'https://16600.cke-cs.com/easyimage/upload/';

To return the editor to the original Breeze functionality for ckeditor_plugins.php, the code is simply:

CKEDITOR.config.extraPlugins = 'zoom,letterspacing,codemirror';

or for ckeditor_plugins_no_design.php

CKEDITOR.config.extraPlugins = 'codemirror';