Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/_images/rte-buttons.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 20 additions & 48 deletions docs/add-ons/rte.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@

[TOC]

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](https://ckeditor.com/ckeditor-5/) and [Redactor](https://imperavi.com/redactor/) as editing engine.
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](https://ckeditor.com/ckeditor-5/) and [RedactorX](https://imperavi.com/redactorx/) as editing engine.

Additionally, [Redactor 3](https://imperavi.com/redactor/) is available as a legacy option, but it is not recommended for new projects.

NOTE: **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](fieldtypes/rte.md) in the channel fields documentation.

Expand All @@ -24,14 +26,14 @@ Tool Sets are essentially pre-created configurations that can be used by particu
Initially RTE installs 4 tool sets:
- **CKEditor Basic:** is based on CKEditor and has buttons for bold, italic, underline, link, and ordered/unordered lists
- **CKEditor Full:** offers full set of CKEditor features
- **Redactor Basic:** is based on Redactor and has buttons for bold, italic, underline, link, and ordered/unordered lists
- **Redactor Full:** offers full set of Redactor features
- **RedactorX Basic:** is based on RedactorX and has buttons for bold, italic, underline, link, and ordered/unordered lists
- **RedactorX Full:** offers full set of RedactorX features

### Creating a Tool Set

- Click the **Create New** button and the tool set creation form will appear.
- Enter a tool set name.
- Select tool set type (CKEditor or Redactor)
- Select tool set type (CKEditor, RedactorX or Redactor)
- Select the toolbar buttons and plugins you wish to have in your new tool set (or use the [Advanced Configuration option](#advanced-configuration)).
- Click **Save Tool Set** to save your changes.

Expand All @@ -49,7 +51,7 @@ Initially RTE installs 4 tool sets:

#### Editor Type

Rich Text Editor comes with [CKEditor](https://ckeditor.com/) v5 and [Redactor](https://imperavi.com/redactor/) v3 support. Both are great, pick the one that fits your needs best.
Rich Text Editor comes with [CKEditor](https://ckeditor.com/) v5 and [RedactorX](https://imperavi.com/redactorx/). Both are great, pick the one that fits your needs best. [Redactor 3](https://imperavi.com/redactor/) has been deprecated, but is also available.

#### Upload Directory

Expand All @@ -59,45 +61,15 @@ The file management features in RTE field can be allowed to access all upload di

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.

<ul style="columns: 4;">
<li>HTML (Redactor only)</li>
<li>Bold</li>
<li>Italic</li>
<li>Strikethrough / Deleted</li>
<li>Underline</li>
<li>Subscript</li>
<li>Superscript</li>
<li>Block quote</li>
<li>Code</li>
<li>Code block</li>
<li>Heading / Format</li>
<li>Remove formatting (CKEditor only)</li>
<li>Style (Redactor only)</li>
<li>Properties (Redactor only)</li>
<li>Undo</li>
<li>Redo</li>
<li>Numbered list</li>
<li>Bulleted list</li>
<li>Decrease indent</li>
<li>Increase indent</li>
<li>Link</li>
<li>Image / File Browser</li>
<li>Table</li>
<li>Media / Video</li>
<li>Embed HTML / Widget</li>
<li>Align (left / right / center)</li>
<li>Justify</li>
<li>Horizontal line</li>
<li>Special characters</li>
<li>"Read More" separator</li>
<li>Font color / background</li>
<li>Fullscreen (Redactor only)</li>
<li>HTML Source editing</li>
</ul>
#### Customize the Toolbar

![RTE buttons](_images/rte-buttons.png)

The exact set of buttons that are available is specific to the editor type selected. CKEditor and Redactor have a single toolbar, while RedactorX has multiple toolbars, each configured separately.

The buttons / plugins that are enabled are displayed in the order they will appear in the toolbar. You can drag and drop the buttons to change their order.

The disabled buttons / plugins are displayed in grey.

#### 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.
Expand All @@ -108,7 +80,7 @@ The minimal height for the field in pixels

#### Maximal height

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

#### Limit characters

Expand All @@ -128,7 +100,7 @@ WARN: **Advanced users only.** Please be careful with using this feature and che

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

Consult [Redactor Docs](https://imperavi.com/redactor/docs/settings/) or [CKEditor Docs](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html) for the list of properties. Note that not all features are supported by the ExpressionEngine implementation.
Consult [RedactorX Docs](https://imperavi.com/redactorx/docs/settings/), [Redactor Docs](https://imperavi.com/redactor/docs/settings/) or [CKEDitor Docs](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html) 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.
Expand Down Expand Up @@ -156,9 +128,9 @@ NOTE: **Note:** If using the [Multiple Site Manager](msm/overview.md), this pref

## Custom plugins

### Redactor
### RedactorX

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.
When using RedactorX or 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`.

Expand Down
2 changes: 1 addition & 1 deletion docs/development/models/channel-field.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ The property `field_settings` consists in an array of settings that depend on th
| relationship | `order_field`, `order_dir` | enum[title,entry_date] , enum[asc,desc] | Default ordering of entries |
| relationship | `display_entry_id` | enum[y,n] | |
| relationship | `allow_multiple` | enum[y,n] | |
| Rich text editor | `toolset_id` | integer | see Rich Text Editor addon for details, for a standard installation: 1 CKEditor Basic, 2 CKEditor Full, 3 Redactor Basic, 4 Redactor Full |
| Rich text editor | `toolset_id` | integer | see Rich Text Editor addon for details, for a standard installation: 1 CKEditor Basic, 2 CKEditor Full, 3 RedactorX Basic, 4 RedactorX Full |
| Rich text editor | `defer` | enum[y,n] | Defer Editor initialization |
| Rich text editor, Textarea | `db_column_type` | enum[text,mediumtext]| Column type in database: TEXT(64Kb) MEDIUMTEXT(16Mb) |
| Rich text editor | `field_wide` | bool | default true, full width |
Expand Down