D6 Tools & Assets Documentation

The rich text editor (RTE) is one of the most powerful authoring tools in AEM. The RTE allows authors/marketers the ability to create complex experiences. It gives authors the ability to:

• Create paragraphs/headings/list etc.
• Add links within content
• Add tables to webpages
• Apply certain styles (bold/italicized/underline) to text

The Problem

The RTE has one major limitation. While most customers have a design system that allows them to create a more immersive experience - links could be certain colours/styles, perhaps a button instead of text. The list might have checkboxes instead of bullets. The text could be big or small. Some customers have multiple different fonts within their brand guides. How do we give marketers the ability to create all these different immersive unstructured experiences?

What We Built

Most RTEs allow content authors to input "CSS classes" onto elements. By allowing authors to put classes on elements it opens the ability to create feature-rich experiences. AEM's RTE is a custom component that was built from scratch, and it lacked the feature of directly adding classes to elements. It did allow a workaround of adding classes by wrapping content within span tags and applying a class to it, but that may or may not provide the same functionality.

Our RTE class extension has the following features:

• Apply CSS classes to any HTML element
• Define classes per element so developers can specify which classes can go on which elements
• Ability to apply classes to inner elements and outer elements. For example, a list item (LI) or an entire list (UL)
• Preview style in the dropdown selection so the author knows exactly what they are applying before having to apply the class

Known Limitations

Our RTE extension is full-featured, though we do plan on enhancing it in the future with the following features:

• Mutually exclusive classes - when one class is chosen you should be unable to choose another class
• Mutually inclusive classes - when you choose one class, another might be automatically applied
• Separation of classes based on classes purpose (separate dropdowns for font-size/font-colour/style)