How to create custom theme dropdown plugin in aem richtext plugins. | Community
Skip to main content
V
VanitaNa1
July 29, 2025
Solved

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

  • July 29, 2025
  • 3 replies
  • 3835 views

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>

 

Best answer by EstebanBustamante

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 

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 29, 2025

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/operations/configure-rich-text-editor-plug-ins#styleselectorlist

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

 

Hope this helps!

Esteban Bustamante
    V
    VanitaNa1Author
    July 29, 2025

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

    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    July 29, 2025

    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 

    Esteban Bustamante
      SantoshSai
      Community Advisor
      SantoshSaiCommunity Advisor
      Community Advisor
      July 29, 2025

      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: 

      Santosh Sai
        S
        SyntaxError_07
        Level 2
        August 26, 2025

        Hello @santoshsai   ,
         i tried with the https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manager/ 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
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        July 30, 2025

         

        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

        Arun Patidar
          Terms & ConditionsAccessibility statement

          Loading footer...