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

hi @swethabe2, 

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

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.

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

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"]