Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Custom Rich Text Editor (RTE) Plugins for Adobe Experience Manager | AEM Community Blog Seeding




Custom Rich Text Editor (RTE) Plugins for Adobe Experience Manager by Bounteous


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?
Adding a new plugin to RTE is a five-step process and involves JavaScript coding.

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
Enable plugin
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:

Sample code:

Read Full Blog

Custom Rich Text Editor (RTE) Plugins for Adobe Experience Manager


Please use this thread to ask the related questions.

Kautuk Sahni
0 Replies