Skip to main content
SwethaBe2
Level 1
Oct 30, 2025 6:18 AM UTC
Solved

How to add custom css class to <ul> or <li> of AEM RTE IN AEM 6.5

If we add some style for list, then markup is generating as below.

<ol>

<li> <span class = "note"> Sample Text </span></li>

<li> Sample Text </li>

</ol>

My requirement is to insert the class in <li class = "note">. If we add some style to whole list , then markup should generate as below 

<ol class = "note">

<li> Sample Text </li>

<li> Sample Text </li>

</ol>

How can i achieve this in RTE?

 

Thanks in advance.

lavishvasuja
lavishvasujaAccepted solution
Level 4
Oct 31, 2025 4:44 AM UTC

Hi @swethabe2 ,

You can handle this using a small JS script. On document ready, check if any <li> contains a <span class="note">, then use .addClass('note') on that <li> or <ol>.

 

This approach keeps the markup clean and avoids unnecessary RTE customization.

View in thread

4 replies

giuseppebaglio
giuseppebaglio
Level 10
Oct 30, 2025 8:44 AM UTC

hi @swethabe2, 

Here you can find the solution: AEM - Touch UI - RTE HTML Element Selector, Custom Style Plugin & Color Picker Plugin

 
Translate
    lavishvasuja
    lavishvasujaAccepted solution
    Level 4
    Oct 31, 2025 4:44 AM UTC

    Hi @swethabe2 ,

    You can handle this using a small JS script. On document ready, check if any <li> contains a <span class="note">, then use .addClass('note') on that <li> or <ol>.

     

    This approach keeps the markup clean and avoids unnecessary RTE customization.

    Translate
      Vishal_Anand
      Vishal_Anand
      Level 6
      Oct 31, 2025 6:06 AM UTC

      Hi @swethabe2 ,

      Create custom plug-in for RTE and then keep HTML snippet as per your business need. We followed the same for our requirements. Avoid JS approach. It is not ideal from web core vitals perspective.

      AEM | Adding a Custom Plugin to RTE | APR, 2025 | Medium

      Translate
        muskaanchandwani
        Adobe Employee
        muskaanchandwaniAdobe Employee
        Adobe Employee
        Oct 31, 2025 3:44 PM UTC

        Hello @swethabe2 

        To apply a style class to the list container (<ol>/<ul>) instead of <li> or <span> in AEM RTE:
        1. Edit the RTE configuration for your component (e.g., /apps/<project>/components/text/cq:dialog/.../rtePlugins).
        2. Enable the Styles plugin:

        Add or confirm:
        rtePlugins/styles/features = "*"
        and include "styles#style" in the RTE toolbar.

        3. Add a style configuration under:
        rtePlugins/styles/stylesConfig

        noteList
        ├── cssName = "note"
        ├── text = "Note List"
        └── element = "ol"

        4. Ensure the Lists plugin is active
        rtePlugins/lists/features = ["ordered", "unordered"]

         

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...