How to create a custom RTE plugin just like a selector

Forum|Forum|3 months ago
November 17, 2025
3 replies
203 views

Hi, I’ve been trying to create a custom plugin for all the RichText XML configurations in my AEM components, but I haven’t been able to get it working. I’ve followed several guides, but I still can’t make it work. Any help? It would just be a simple select with options and a text field.

We’ve added custom fields to components like the link plugin — that was quite easy by modifying only the JS. But in this case we would be creating a completely new property.

https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manager/#create_new_clientlib_provide_categories

https://medium.com/globant/build-a-custom-rte-plugin-with-chatgpt-for-aem-4e373487a6fe

muskaanchandwani

Employee

Hello @tenu

To get your custom RTE plugin (select + text field + new property) working across components, you need three things wired correctly:

1. Clientlib with plugin JS
Create a clientlib under /apps with:
categories="[rte.coralui3]" (so Touch UI RTE loads it).
Your JS file that:
- Registers the plugin:
CUI.rte.plugins.PluginRegistry.register("mycustom", MyCustomPlugin);
- Registers the command:
CUI.rte.commands.CommandRegistry.register("mycustom#edit", MyCustomCommand);

This JS:
- Adds a toolbar button.
- On click, opens a dialog (select + text field).
- Writes something into the RTE HTML (e.g. wraps selection in <span data-my-type="X" data-my-text="Y">…</span>).

2. RTE XML config to activate the plugin

In each RTE dialog config (e.g. under your text node):

<rtePlugins jcr:primaryType="nt:unstructured">
<!-- your plugin -->
<mycustom
jcr:primaryType="nt:unstructured"
features="[edit]"/>
</rtePlugins>

<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,mycustom#edit]"/>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,mycustom#edit]"/>
</cui>
</uiSettings>

Names must line up:

Plugin ID in JS and XML: mycustom.
Feature in JS getFeatures() = "edit".
Toolbar string = mycustom#edit.

3. How the “new property” is stored

Easiest: store it as attributes in the RTE HTML (e.g. data-my-type, data-my-text) as the link plugin does with href, target, etc.
Your rendering code (HTL/Sling Model) can then read those attributes if needed.
No extra JCR property is required unless you explicitly want one.

M

manikandan90

New Participant

@tenu

Please refer to these articles where there is a good detail explanation about how to add a custom plugin for an RTE:

https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag...

https://medium.com/globant/build-a-custom-rte-plugin-with-chatgpt-for-aem-4e373487a6fe