ExpressionEngine Docs

Rich Text Editor

ExpressionEngine’s built-in Rich Text Editor (RTE) is a fieldtype that can be used for entry editing in the Control Panel as well as frontend Channel Forms. It is offering CKEditor 5 and Redactor as editing engine.

Note: If you’re looking for how to use RTE fields in your channel entries loops, you should look at the RTE field variable usage documentation in the channel fields documentation.

Control Panel Location: Developer --> Add-Ons --> Rich Text Editor

Tool Sets

Tool Sets are essentially pre-created configurations that can be used by particular RTE fields. Tool sets includes settings for upload directory, enabled toolbar elements, and initial field height.

Initially RTE installs 4 tool sets:

Creating a Tool Set

Editing a Tool Set

Toolbar elements

Editor Type

Rich Text Editor comes with CKEditor v5 and Redactor v3 support. Both are great, pick the one that fits your needs best.

Upload Directory

The file management features in RTE field can be allowed to access all upload directories (default) or limited to certain one.

Text direction

Choose between “Left to right” and “Right to left”

Tool Set Buttons

The following are the buttons that can be enabled in tool set to manipulate the data within an RTE field.

Custom Stylesheet

CSS template with styles to be applied to fields using this tool set. All styles will be automatically prefixed with toolset class, which means that the template should hold rather generic styles for the elements.

Minimal height

The minimal height for the field in pixels

Maximal height

The maximum height for the field in pixels (Redactor only).

Limit characters

Limits the number of character that can be entered into the field (Redactor only).

Advanced configuration

Add custom formatting styles, buttons, and interactions to your RTE toolset by using advanced configurations. Toggling this button hides the visual constructor toolbar and reveals advanced configuration options. These advanced options allow for editing the configuration directly in JSON format.

{ee:u} Checkout the Advanced RTE Configurations article on ExpressionEngine University for examples of how to add custom CSS and JavaScript to your RTE configurations.

Configuration JSON

Allows overriding the visually constructed tool set with a JSON object. Remember that all properties need to be quoted.

Advanced users only. Please be careful with using this feature and check your work. Providing invalid configuration can make the RTE fields inaccessible.

Initially the field is loaded with the saved configuration of tool set being edited.

Consult Redactor Docs or CKEDitor Docs for the list of properties. Note that not all features are supported by the ExpressionEngine implementation.

Extra JavaScript

JavaScript template to be included with fields using this tool set. Typically used to include extra plugins when using advanced configuration with Redactor.

Cloning a Tool Set

Deleting a Tool Set

To delete a tool set, check the tool set’s checkbox in the tool set table listing. Once one or more tool sets are selected, the bulk action control will appear below the table where you can perform bulk actions on the tool sets. Click the drop down to choose delete and then click Submit.

RTE Configuration

Note: If using the Multiple Site Manager, this preference is per-site.

Custom plugins

Redactor

When using Redactor, the javascript for the plugin can be placed in the template, which then needs to be selected in “Extra JavaScript” field for the tool set. Then enable extended configuration, add the plugin name to list of plugins and provide plugin config if necessary. If the plugin needs extra styling, it can be placed in CSS Templates selected in “Custom Stylesheet” field for the tool set. If the CSS is targeting buttons, the selectors need to be prefixed with .redactor-toolbar.

CKEditor

Because ExpressionEngine is using custom build of CKEditor, you would need to recompile the editor if you need to add third-party or your own plugin.

If the plugin needs extra styling, it can be placed in CSS Templates selected in “Custom Stylesheet” field for the tool set. If the CSS is targeting buttons, the selectors need to be prefixed with .ck-toolbar.

Warning Doing this requires advanced development skills.

In order to create custom CKEditor build: