How to create a custom RTE plugin just like a selector | Community
Skip to main content
T
Tenu
Level 2
November 17, 2025
Question

How to create a custom RTE plugin just like a selector

  • November 17, 2025
  • 3 replies
  • 209 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

 

3 replies

giuseppebaglio
giuseppebaglio
Level 10
November 17, 2025

Hi @Tenu,

Please take a look at the AEM - Touch UI - RTE HTML Element Selector, Custom Style Plugin & Color Picker Plugin. The proposed plugin demonstrates how to implement a select with predefined values.

 

Could you please elaborate on this sentence to clarify your wishes?

But in this case we would be creating a completely new property.

 

M
manikandan90
Level 2
November 17, 2025

@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 

muskaanchandwani
Adobe Employee
muskaanchandwaniAdobe Employee
Adobe Employee
November 19, 2025

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.

Terms & ConditionsAccessibility statement

Loading footer...