Configure the Rich Text Editor configure-the-rich-text-editor

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 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 editingmodes

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.

Inline editing 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 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 , from the compact toolbar when using the inline editing mode.

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 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 aboutplugins

The functionality is made available via a series of plug-ins, each with:

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:

Understand the configuration paths and locations 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:

Configure the following properties that apply in Dialog editing mode in Touch UI only:

When RTE is used in the touch-enabled dialog, setting the property useFixedInlineToolbar to true is mandatory to avoid issues.

Customizing in place editing customizing-in-place-editing

You can define on which HTML selector the text editor starts by configuring the following properties:

The corresponding property for dialog mode is name.

Enable RTE functionalities by activating plug-ins 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.

Get File

Configure RTE toolbar dialogfullscreen

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:

<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 rtecontentpolicies

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.

As an example, you can see the Text Core Component documentation.

Customize mapping between toolbar icons and commands iconstoolbar

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.

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 switch-to-coralui-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.

Further Information 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 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 known-limitations

AEM RTE capability has the following limitations: