How can i add custom css class to <ul> of AEM RTE component

[praveenk9057427]

In RTE Component of AEM - unordered list by default provides "." bullet list.

I need to provide an option to make list with checkmark bullets.

If we add some style (by configuring styles nodes) for list, then markup is generating as below.

<ul>

<li> <span class="abc">Line One</span> </li>

<li> <span class="abc">Line Two</span> </li>

</ul>

so whatever changes made( colored check mark or font) are applying to whole <li> content.

i am thinking to insert a class in ul so that i can control default "." bullets behavior with some other list type.

on applying of style to ul div my source should look like

<ul class="abc">

<li>Line One</li>

<li>Line Two</li>

</ul>

How can i achieve this in RTE. is any custom list plugin changes required? or can we achieve by properties?

Thanks in advance.

[joeb21688728]

Configure the Rich Text Editor

[arunpatidar · Accepted solution]

Here is the solution

AEM - Touch UI - RTE HTML Element Selector, Custom Style Plugin & Color Picker Plugin

[kchaurasiya]

Hi Arun, This is working on 6.4.2 service pack . As i have upgraded from 6.4.2 to 6.4.8 and the same code is not working on 6.4.8 service pack. Could you please check the same. Quick response is appreciated. Thank You..!!

[praveenk9057427]

Thank You Arun, Your custom style plugins helped me a lot.