AEM | RTE – Custom Styles Plugin

AEM RTE OOB provide a Styles plugin which allow you to apply custom css class on selected text in RTE. Styles plugin is a good way to add custom class around any text and is easy to configure though this plugin has some limitation:

1. This plugin is limited to one style for a selected text. We can not apply multiple styles on same text. eg. An editor can not apply UpperCase Style along with Primary Color style on same text.
2. Styles once applied, can not be removed, rather will be replaced by some other style.

This bring a need to have multiple plugins similar to Styles plugin eg. fontstyle, fontcolor & fontsize. So that we can easily decorate our content with correct style.

Implementation: I will explain how to create two rte plugins – fontstyle, fontcolor. For implementation of these plugins, please see

1. RTE – Custom Styles Plugin – Touch UI
2. RTE – Custom Styles Plugin – Classic UI

Using custom styles plugin: Like OOB style plugin, our custom plugin can be used in same pattern. Use following steps to add fontstyles & fontcolor plugins in RTE.

1. Within your component definition create the nodes:

   - rtePlugins/fontstyles
   - rtePlugins/fontcolor

2. Create the features property on the fontstyles & fontcolor node:

   - Name features
   - Type String
   - Value * (asterisk)

3. Under the node fontstyles/fontcolor, create a new node (also called styles) to hold the list being made available:

   - Name styles
   - Type cq:WidgetCollection

4. Create a new node under the styles node to represent an individual style:

   - Name you can specify the name, but it should be suitable for the style
   - Type nt:unstructured

5. Add the property cssName to this node to reference the CSS class:

   - Name cssName
   - Type String
   - Value The name of the CSS class (without a preceding '.'; e.g. cssClass instead of .cssClass)

6. Add the property text to the same node; this defines the text shown in the selection box:

   - Name text
   - Type String
   - Value Description of the style; will appear in the Style drop down selection box.

7. Save the changes.
8. Repeat steps 4 to 7 for each style required.