From 76732ced4f6cf86f45f0d4bc86909d85f9c89144 Mon Sep 17 00:00:00 2001 From: Yuri Salimovskiy Date: Mon, 6 Nov 2023 15:59:07 +0200 Subject: [PATCH] redactorx update --- docs/_images/rte-buttons.png | Bin 0 -> 8568 bytes docs/add-ons/rte.md | 68 +++++++---------------- docs/development/models/channel-field.md | 2 +- 3 files changed, 21 insertions(+), 49 deletions(-) create mode 100644 docs/_images/rte-buttons.png diff --git a/docs/_images/rte-buttons.png b/docs/_images/rte-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..c75b79a9d2a346a5e36bb4814cc7e279538ee4af GIT binary patch literal 8568 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 U&sO=we@l>nH1ySL?%Ra^2mU|9WdHyG literal 0 HcmV?d00001 diff --git a/docs/add-ons/rte.md b/docs/add-ons/rte.md index 00d258a07..dd010a1a7 100755 --- a/docs/add-ons/rte.md +++ b/docs/add-ons/rte.md @@ -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. @@ -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. @@ -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 @@ -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. - -
    -
  • HTML (Redactor only)
    • -
  • Bold
    • -
  • Italic
    • -
  • Strikethrough / Deleted
    • -
  • Underline
    • -
  • Subscript
    • -
  • Superscript
    • -
  • Block quote
    • -
  • Code
    • -
  • Code block
    • -
  • Heading / Format
    • -
  • Remove formatting (CKEditor only)
    • -
  • Style (Redactor only)
    • -
  • Properties (Redactor only)
    • -
  • Undo
    • -
  • Redo
    • -
  • Numbered list
    • -
  • Bulleted list
    • -
  • Decrease indent
    • -
  • Increase indent
    • -
  • Link
    • -
  • Image / File Browser
    • -
  • Table
    • -
  • Media / Video
    • -
  • Embed HTML / Widget
    • -
  • Align (left / right / center)
    • -
  • Justify
    • -
  • Horizontal line
    • -
  • Special characters
    • -
  • "Read More" separator
    • -
  • Font color / background
    • -
  • Fullscreen (Redactor only)
    • -
  • HTML Source editing
    • -
+#### 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. @@ -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 @@ -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. @@ -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`. diff --git a/docs/development/models/channel-field.md b/docs/development/models/channel-field.md index b932a00fb..439cae71b 100644 --- a/docs/development/models/channel-field.md +++ b/docs/development/models/channel-field.md @@ -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 |