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:
- 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.
- 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
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.
- Within your component definition create the nodes:
- rtePlugins/fontstyles - rtePlugins/fontcolor
- Create the features property on the fontstyles & fontcolor node:
- Name features - Type String - Value * (asterisk)
- Under the node fontstyles/fontcolor, create a new node (also called styles) to hold the list being made available:
- Name styles - Type cq:WidgetCollection
- 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
- 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)
- 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.
- Save the changes.
- Repeat steps 4 to 7 for each style required.