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

Forum|Forum|4 months ago
October 30, 2025
4 replies
279 views

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

<li> Sample Text </li>

</ol>

How can i achieve this in RTE?

Thanks in advance.

muskaanchandwani

Employee

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

Vishal_Anand

New Participant

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

lavishvasuja

New Participant

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.