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

[SwethaBe2]

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.

[giuseppebaglio]

hi @SwethaBe2, 

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

[lavishvasuja]

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.

[Vishal_Anand]

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

[muskaanchandwani]

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