Out-of-the-box (OOTB) plugins and their features cover many text editing use cases, but there will always be a need for customization. Recently, I came across a requirement where authors wanted the flexibility to add data attributes to the HTML elements for analytics tracking using the Text component RTE capabilities in Adobe Experience Manager (AEM).
Learn how to add a custom tool to RTE that will add data attributes to a specific element within HTML by following the steps outlined in this article. This same process can be used for any other custom RTE Tools you have to add as well.
By following these steps, you will enable the author to add attributes or remove attributes using the in-place editing toolbar in AEM, as can be seen below.
How to Add a Custom Plugin to RTE?
Create a new Clientlib and provide Categories
Create a new Command and Register it with CommandRegistry
Create a new Plugin and Register it with PluginRegistry
Create a custom dialog if there is a need
Step 1: Create a New Clientlib and Provide Categories
The clientlib name required to load the custom RTE plugin in AEM Author editing mode is rte.coralui3.
Create a clientlib directory and set the categories to rte.coralui3: