Configure the Rich Text Editor
- Topics:
- Administering
CREATED FOR:
- Admin
The Rich Text Editor (RTE) provides authors with a wide range of functionality for editing their text content. Icons, selection boxes, toolbar, and menus are provided for a WYSIWYG text-editing experience.
To know how to use RTE features for authoring, see Use Rich Text Editor for authoring. RTE can be configured to enable, disable, and extend the features available in the authoring components. The following workflow illustrates a recommended order of completing the RTE configuration tasks in Experience Manager.
Figure: Typical workflow to configure Rich Text Editor
Understand Touch-enabled UI and Classic UI
The Touch-enabled UI is the standard UI for AEM. Adobe introduced Touch UI with responsive design for authoring environment, in version 5.6. The Touch UI is designed for touch and desktop devices. The UI differs considerably from the original classic UI.
Figure: Rich Text Editor toolbar in Touch-enabled UI
Figure: Rich Text Editor toolbar in Classic UI
Various modes of editing
Authors can create and edit textual content in AEM using the different modes of components. The toolbar options for authoring and formatting content and the user experience of RTE-enabled components in different editing mode varies based on RTE configurations.
Editing mode | Editing area | Recommended features to be enabled | Touch UI | Classic UI |
---|---|---|---|---|
Inline | In-place editing for quick, minor edits; Format without opening a dialog box | Minimal RTE features | Y | Y |
RTE full screen | Covers entire page | All the required RTE features | Y | N |
Dialog | Dialog box on top of the page content but does not cover the entire page | All the required RTE features in Classic UI; judiciously enable features in Touch UI | Y | Y |
Dialog full screen | Same as Full screen mode; contains fields of the dialog alongside RTE | All the required RTE features | Y | N |
Inline editing
When opened (with a slow double-tap/click) the content can be edited within the page. A compact toolbar with basic options is presented.
Figure: Inline editing with basic toolbar in Touch-enabled UI
In Classic UI, a slow double-click on the component allows inline editing and an orange outline highlights the content. If the Content Finder is open, a toolbar with the available RTE formatting options is displayed at the top of the window. If the Content Finder is not open, the formatting options are not displayed and you can do basic text edits only.
Full screen editing
AEM components can be opened in full screen view that hides the page content and occupies the available screen. Consider full screen editing a detailed version of the inline editing as it offers the most editing options. It can be opened by clicking
The dialog full screen mode provides, a detailed RTE toolbar and the options and the components that are available in the dialog mode. It is applicable only for a dialog that contains RTE alongside other components.
Figure: The detailed RTE toolbar when editing in full screen mode in Touch-enabled UI
Dialog editing
When a component is double-clicked in Classic UI, a dialog box opens for editing the contents. The dialog box opens on top of the existing page. In some specific scenarios, the dialog opens as a pop-up window. For example, when a Text component is part of a column in a multi-column page layout and the area available for the dialog is less.
Figure: Dialog editing mode in Touch-enabled UI
Figure: Dialog box in Classic UI that contains detailed toolbar for editing
About RTE plug-ins and the associated features
The functionality is made available via a series of plug-ins, each with:
-
A
features
property:- That is used to activate, or deactivate, basic functionality for that plug-in.
- That can be configured using a standardized procedure.
-
Where appropriate, more properties and options that require specialized configuration.
Basic features of the RTE are activated, or deactivated, by the value of the features
property on a node specific to the appropriate plug-in.
The following table lists the current plug-ins, showing:
- Plug-in IDs with a link to API documentation. ID is used as the node name when activating a plug-in.
- Permitted values for the
features
property. - A description of the functionality provided by the plug-in.
Plug-in ID | features | Description |
---|---|---|
edit | cut copy paste-default paste-plaintext paste-wordhtml | Cut, copy and, the three paste modes. |
findreplace | find replace | Find and replace. |
format | bold italic underline | Basic text formatting. |
image | image | Basic image support (drag from content or Content Finder). Depending on the browser, the support has different behaviors for authors |
keys | To define this value, see tab size. | |
justify | justifyleft justifycenter justifyright | Paragraph alignment. |
links | modifylink unlink anchor | Hyperlinks and anchors. |
lists | ordered unordered indent outdent | This plug-in controls both indentation and lists; including nested lists. |
misctools | specialchars sourceedit | Miscellaneous tools allow authors to enter special characters or edit the HTML source. Also, you can add a whole range of special characters if you want to define your own list. |
Paraformat | paraformat | The default paragraph formats are Paragraph, Heading 1, Heading 2, and Heading 3 (<p> , <h1> , <h2> , and <h3> ). You can add more paragraph formats or extend the list. |
spellcheck | checktext | Language aware spell checker. |
styles | styles | Support for styling using a CSS class. Add new text styles if you want to add (or extend) your own range of styles for use with text. |
subsuperscript | subscript superscript | Extensions to the basic formats, adding sub- and super-script. |
table | table removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns | See configure table styles, if you want to add your own styles for either entire tables or individual cells. |
undo | undo redo | History size of undo and redo operations. |
dialogFullScreen
setting to configure the toolbar for full screen mode.Understand the configuration paths and locations
The mode of RTE editing (and the UI) that you provide for your authors decide the location for the configuration details when you are activating the RTE plug-ins:
Editing mode | Location for Touch UI | Location for Classic UI |
---|---|---|
Inline | cq:editConfig/cq:inplaceEditing | cq:editConfig/cq:inplaceEditing |
Full screen | cq:editConfig/cq:inplaceEditing | Not applicable |
Dialog | cq:dialog | dialog |
Full screen dialog | cq:dialog | Not applicable |
cq:inplaceEditing
as config
. On cq:inplaceEditing
node, define the following properties:- Name:
configPath
- Type:
String
- Value: path of the node containing the actual configuration
config
. Otherwise, the RTE configurations take effect for only the administrators and not for the users in the group content-author
.Configure the following properties that apply in Dialog editing mode in Touch UI only:
-
useFixedInlineToolbar
: Set this Boolean property defined on the RTE node (one with sling:resourceType=cq/gui/components/authoring/dialog/richtext
) toTrue
, to make RTE toolbar fixed instead of floating.When this property is true, Richtext editing is, by default, started on the “foundation-contentloaded” event.
To prevent this, set the property
customStart
toTrue
and trigger the ‘rte-start’ event to start RTE editing. When this property is ‘true’, the default behavior, rte start on click, does not work. -
customStart
: Set this Boolean property defined on the RTE node toTrue
, to control when to start RTE by triggering the eventrte-start
. -
rte-start
: Trigger this event on thecontenteditable-div
of RTE, when to start editing RTE. This works only ifcustomStart
has been set to true.
When RTE is used in the touch-enabled dialog, setting the property useFixedInlineToolbar
to true is mandatory to avoid issues.
Customizing in place editing
You can define on which HTML selector the text editor starts by configuring the following properties:
editElementQuery
- Defined oncq:InplaceEditingConfig
, this property is used to specify a selector of the HTML element on which the inline-editing for the Text Component will be started. If not specified, the inline-editing is directly started on the Text Component HTML.textPropertyName
- Defined oncq:InplaceEditingConfig
, this property is used to specify the name of the property that will be saved on the content node where the HTML value of the text component will be persisted after inline-editing.
The corresponding property for dialog mode is name
.
Enable RTE functionalities by activating plug-ins
RTE functionalities are made available via a series of plug-ins, each with features property. You can configure the features property to enable or disable the various features of each plug-in.
For detailed configurations of the RTE plug-ins, see how to activate and configure the RTE plug-ins.
Download this sample configuration to understand how to configure RTE. In this package all the features are enabled.
/libs/wcm/foundation/components/text
/libs/foundation/components/text
Configure RTE toolbar
AEM allows you to configure the UI for the RichText Editor differently for the different editing modes. The default settings are provided below. You can override these defaults based on your requirements.
For best authoring experience:
- In a floating dialog, enable only those plug-ins that do not have a pop-up, as the floating dialog is smaller in size.
- In full screen dialog, enable all the required plug-ins, even the plug-ins with larger pop-up, such as the
Paste
plug-in. Use thedialogFullScreen
configuration described below.
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</inline>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
<popovers jcr:primaryType="nt:unstructured">
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</dialogFullScreen>
<tableEditOptions
jcr:primaryType="nt:unstructured"
toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
</tableEditOptions>
</cui>
</uiSettings>
Different UI settings are used for the inline mode and full screen mode. The toolbar property is used to specify the buttons of the toolbar. For example, if the button is itself a feature (for example, Bold
), it is specified as PluginName#FeatureName
(for example, links#modifylink
). If the button is a popover (containing some features of a plug-in), it is specified as #PluginName
(for example, #format
). Separators ( | ) between a group of buttons can be specified with ‘-’.
The pop-up node under inline or full-screen mode contains a list of the popovers being used. Each child node under the popovers
node is named after the plug-in (for example, format
). It has a property items
containing a list of features of the plug-in (for example, format#bold
).
RTE user interface settings and content policies
Administrators can control the RTE options using content policies, say instead of doing the configuration as described above. Content policies define the design properties of a component when used as part of an editable template. For example, if a text component that uses the RTE is used with an editable template, the content policy can define that the bold option be available and a few paragraph formatting options be available. Content policies are reusable and can be applied across multiple templates.
AEM 6.4 Service Pack 3 onwards, the available options in the RTE flow downstream from the user interface configurations to the content policies.
- User interface configuration settings define which options are available to the content policies.
- If the user interface configuration of the RTE removed or doesn’t enable an item, the content policy cannot configure it.
- An author has access to only such functionality as is made available by the user interface configurations and the content policies.
As an example, you can see the Text Core Component documentation.
Customize mapping between toolbar icons and commands
You can customize the mapping between Coral icons displayed on the RTE toolbar and the available commands. You cannot use any other icons besides Coral icons.
-
Create a node named
icons
underuiSettings/cui
. -
Create nodes for individual icons under it.
-
On each of the individual icon nodes, specify a Coral icon and a command to map to the icon.
Below is a sample snippet to map the command Bold to the Coral icon named textItalic
.
<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format jcr:primaryType="nt:unstructured" features="bold,italic"/>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
</inline>
<icons jcr:primaryType="nt:unstructured">
<bold jcr:primaryType="nt:unstructured"
command="format#bold"
icon="textItalic"/>
</icons>
</cui>
</uiSettings>
</text>
Switch to CoralUI 2 Rich Text Editor
On a page, you can either include CoralUI 2 RTE clientlib or the CoralUI 3 RTE clientlib. By default, Rich Text Editor includes the CoralUI 3 RTE clientlib. To switch to CoralUI 2 RTE, perform the following steps.
rte.coralui3
library.-
Overlay the node
/libs/cq/gui/components/authoring/editors/clientlibs/core
under/apps
, and do the following:- Replace
rte.coralui3
withrte.coralui2
for the dependencies property. - Replace
cq.authoring.editor.core.inlineediting.rte.coralui3
withcq.authoring.editor.core.inlineediting.rte.coralui2
for the embed property. - Replace
cq.authoring.rte.coralui3
withcq.authoring.rte.coralui2
for the embed property.
- Replace
-
Overlay the nodes
/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
and/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
under/apps
.Remove category
cq.authoring.dialog
from/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
and add it to/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
. -
Change any other dependency that is getting included on the page from
rte.coralui3
torte.coralui2
. For example, after overlaying the node/libs/mcm/campaign/components/touch-ui/clientlibs/rte
under/apps
, change any dependency on it fromrte.coralui3
torte.coralui2
. -
Overlay the node
cq/ui/widgets
under/apps
. Replace the dependencycq.rte
at the node/apps/cq/ui/widgets
withcq.coralui2.rte
.
Further Information
For more information about configuring the RTE, see the AEM Widget API reference.
In particular, to see the plug-ins and related options available:
-
The CQ.form.RichText component provides a form field for editing styled text information (rich text). To know all the parameters available for the rich text form, see the Config Options.
-
The RichText component provides a wide range of functionality using plug-ins listed under CQ.form.rte.plugins.Plugin. For each plug-in:
- See the Features for details of functionality that can be enabled (or disabled).
- See the Config Options for all parameters available for detailed configuration of the appropriate plug-in.
-
More information about HTML Rules for links is also available.
The above options can be used to extend and customize your own RTE. For example, to list the anchors available in the page when creating a link you can provide your own implementation of the LinkPlugin
.
Known limitations
AEM RTE capability has the following limitations:
-
RTE capabilities are supported only in AEM component dialogs. RTE is not supported on wizards or Foundation-forms like Page Properties and Scaffolding on Touch-enabled UI.
-
AEM does not work on Hybrid devices.
-
Do not name the RTE configuration node
config
. Otherwise, the RTE configuration takes effect for only the administrators and not for the users in the groupcontent-author
. -
RTE does not support inline frame or iframe to embed content.
Experience Manager
- Administering User Guide overview
- Sites Features
- Website Administration
- Reusing Content: Multi Site Manager and Live Copy
- Live Copy Overview Console
- Configuring Live Copy Synchronization
- Creating and Synchronizing Live Copies
- MSM Rollout Conflicts
- MSM Best Practices
- Translating Content for Multilingual Sites
- Managing Translation Projects
- Identifying Content to Translate
- Preparing Content for Translation
- Creating a Language Root Using the Classic UI
- Connecting to Microsoft Translator
- Configuring the Translation Integration Framework
- Language Copy Wizard
- Translation Enhancements
- Translation Best Practices
- Configurations and the Configuration Browser
- AEM FAQs
- Operations
- Dashboards
- Operations Dashboard
- Backup and Restore
- Data Store Garbage Collection
- Monitoring Server Resources Using the JMX Console
- Working with Logs
- Configure the Rich Text Editor
- Configure the Video component
- The Bulk Editor
- Configuring Email Notification
- Configuring RTE for Producing Accessible Sites
- The Link Checker
- Troubleshooting AEM
- Audit Log Maintenance in AEM 6
- Editor
- Managing Access to Workflows
- Using cURL with AEM
- Configuring Undo for Page Editing
- Proxy Server Tool (proxy.jar)
- Configuring for AEM Apps
- Administering Workflows
- Configuring Search Forms
- Tools Consoles
- Reporting
- Administering Workflow Instances
- Configuring Layout Container and Layout Mode
- Enabling Access to Classic UI
- Starting Workflows
- Configure the Rich Text Editor plug-ins
- Admin Consoles
- Security
- User Administration and Security
- User, Group and Access Rights Administration
- Security Checklist
- OWASP Top 10
- Running AEM in Production Ready Mode
- Identity Management
- Adobe IMS Authentication and Admin Console Support for AEM Managed Services
- Creating a Closed User Group
- Mitigating serialization issues in AEM
- User Synchronization
- Encapsulated Token Support
- Single Sign On
- How to Audit User Management Operations in AEM
- SSL By Default
- SAML 2.0 Authentication Handler
- Closed User Groups in AEM
- Granite Operations - User and Group Administration
- Enabling CRXDE Lite in AEM
- Configuring LDAP with AEM 6
- Configure the Admin Password on Installation
- Service Users in AEM
- Encryption Support for Configuration Properties
- Handling GDPR Requests for the AEM Foundation
- Content Disposition Filter
- Personalization
- eCommerce
- Integration
- Integrating with Third-Party Services
- Integrating with Salesforce
- Integrating with Adobe Target
- Integrating with Adobe Analytics
- Connecting to Adobe Analytics and Creating Frameworks
- Configuring Link Tracking for Adobe Analytics
- Mapping Component Data with Adobe Analytics Properties
- Configuring Video Tracking for Adobe Analytics
- HTTP2 Delivery of Content FAQ
- Troubleshooting your Adobe Campaign Integration
- SharePoint Connector Licenses, Copyright Notices, and Disclaimers
- SharePoint Connector
- DHTML Viewer End-of-Life FAQs
- Integrating with Adobe Campaign Classic
- Related Community Articles
- Integrating with Adobe Campaign Standard
- Flash Viewers End-of-Life Notice
- Integrating with Adobe Creative Cloud
- Integrating with Adobe Dynamic Tag Management
- Opting Into Adobe Analytics and Adobe Target
- AEM Portals and Portlets
- Integrating with Dynamic Media Classic
- Troubleshooting Integration Issues
- Integrating with BrightEdge Content Optimizer
- Best Practices for Email Templates
- Catalog Producer
- Integrating with Silverpop Engage
- Integrating with Adobe Campaign
- Integrating with ExactTarget
- Analytics with External Providers
- Integrating with the Adobe Marketing Cloud
- Manually Configuring the Integration with Adobe Target
- Prerequisites for Integrating with Adobe Target
- Adobe Classifications
- Solutions Integration
- Target Integration with Experience Fragments
- Best Practices
- Content Management