You're viewing help content for version:

The Rich Text Editor (RTE) is a basic building block for inserting textual content into AEM. It forms the basis of various components, including:

  • Text
  • Text Image
  • Table

In-Place Editing

Selecting a text-based component with a single tap or click will reveal the component toolbar as with any component.

chlimage_1

Tapping/clicking agin or initially selecting the component with a slow double-tap/click will open in-place editing, which has its own toolbar. Here you can edit the content and make basic formatting changes.

chlimage_1

This toolbar provides the following options:

  • Format
    This allows you to set Bold, Italic and Underline.
  • Lists
    With this you can create bulleted or numbered lists, or set the indentation.
  • Hyperlink
  • Unlink
  • Fullscreen
  • Close
  • Save

Full-Screen Editing

For text-based components, selecting the full screen mode from the toolbar will open the rich text editor and hide the rest of the page content.

chlimage_1

Fullscreen mode will show all options of your rich text editor, which can vary depending on the configuration.

chlimage_1

Additional rich text editor options include:

  • Anchor
    Create an anchor in the text that you can later link to/reference.
  • Align Text Left
  • Cetner Text
  • Align Text Right

 

Close fullscreen mode by clicking the minimize icon.

chlimage_1

Switching to Coral 2 Rich Text Editor

On a page, you can either include Coral 2 RTE clientlib or the Coral 3 RTE clientlib. By default, Rich Text Editor includes the Coral 3 RTE clientlib.

Custom plugins for Coral 2 RTE should work with Coral 3 RTE as long as they do not depend on RTE internals (for example, classes and so on).

However, if you want to switch to Coral 2 RTE, perform the following steps:

  1. At the node /libs/cq/gui/components/authoring/editors/clientlibs/core, do the following:

    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  2. Remove category cq.authoring.dialog from /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 and add this category on /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2.

  3. Change any other dependency that is getting included on the page from rte.coralui3 to rte.coralui2, for example at /libs/mcm/campaign/components/touch-ui/clientlibs/rte.

  4. Replace the dependency cq.rte at the node /libs/cq/ui/widgets with cq.coralui2.rte.

Note:

Coral 2 RTE uses handlebars templates for plugin dialogs. Therefore, the Coral 2 RTE clientlib had a dependency on the handlebars clientlib. Coral 3 RTE does not use handlebars templates and , therefore, doesn't have any associated dependency. If your custom plugins use handlebars templates, include the handlebars clientlib in your web page.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy