How to create custom theme dropdown plugin in aem richtext plugins.

[VanitaNa1]

I want to create custom theme dropdown plugin in aem richtext plugins. Which will have the two drop down i.e.,

1.Light background Themed

2.Dark background Themed
When i click on Light background Themed option it should wrap the text component with <span class = "hover-light">.
For example:

<span class="hover-light">

<p><a href="https://www.google.com">Some</a> text</p>

</span>

[EstebanBustamante]

Hi,

You can enable the "style" plugin to achieve exactly what you're looking for. It allows you to define and apply multiple custom styles, each of which wraps the element in a <span> with the specified class.

For more details, please refer to the following resource:

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/operati...

https://medium.com/@anshulag_/add-custom-styles-to-an-rte-field-in-aem-adobe-experience-manager-with... 

Hope this helps!

[VanitaNa1]

This will override my existing Style plugin. I don't want to override that, i want to have new plugin for theme.

[EstebanBustamante · Accepted solution]

Creating a new plugin is more complex than simply extending an existing one. I’d recommend adding your custom styles to the style plugin instead. However, if you’re set on developing a new plugin from scratch, you can refer to the following resource for guidance:

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 

[SantoshSai]

Hi @VanitaNa1,
I completely agree with @EstebanBustamante using the existing style plugin is the recommended and simplest approach in most cases, especially when the goal is just to apply classes via spans. It’s great that AEM allows us to configure it flexibly via rtePlugins and styles.

However, in this specific case, where user aiming to create a separate plugin named “Theme” for the following reasons:

• We want to retain the existing style plugin for standard formatting use.

• The UI/UX requirement is to keep "Themes" as a distinct dropdown (not mixed with styles).

• There’s potential for future expansion (eg. toggle behaviors or script injection), so having a modular plugin is preferred.

I understand that writing a custom RTE plugin introduces some complexity, but since it's isolated and doesn't override any existing functionality, it aligns with best practices when clean separation of concerns is needed.

That means, for anyone who doesn't need a separate UI element, the style plugin definitely remains the best low-maintenance option.

Go throught htese articles in case: 

• 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
• https://medium.com/@anshulag_/add-custom-styles-to-an-rte-field-in-aem-adobe-experience-manager-with...

[SyntaxError_07]

Hello @SantoshSai   ,
 i tried with the https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag... example which they provided a package, and in my editor page am getting this console error
caught TypeError: Cannot read properties of undefined (reading 'initializeEdit')
at d.addSpan (rteCustomPlugin.lc-0b278649f24b44adfe6e2721af7cdf79-lc.min.js:199:34)
at d.execute (rteCustomPlugin.lc-0b278649f24b44adfe6e2721af7cdf79-lc.min.js:307:22)
at d.length.c.toolbarClickHandler (richtext.lc-ab3001cde09348afbc0466b21ae6dc24-lc.min.js:909:218)
at HTMLButtonElement.dispatch (jquery.lc-955570495c351f1d6456756c61e20509-lc.min.js:127:359)
at k.handle (jquery.lc-955570495c351f1d6456756c61e20509-lc.min.js:121:65)

could you let me know whats wrong here.. i am doing this in aem as cloud instance local

[arunpatidar]

Hi @VanitaNa1 

You’ll need a custom plugin here, similar to what @EstebanBustamante  and @SantoshSai  have suggested.

First, the markup you’re expecting is not valid HTML structurally — you shouldn’t place a <p> tag inside a <span>.

For example, this is incorrect:

<span class="hover-light"> <p><a href="https://www.google.com">Some</a> text</p> </span>


Please refer to this guide for creating a custom plugin:
https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html