Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Rich Text Editor add style for list

Avatar

Level 3

Hi,

In rich text editor, may I know whether it is possible to add the style class to the <ul> or <li> element?

I tried to follow the steps on https://docs.adobe.com/docs/en/aem/6-1/author/page-authoring/rich-text-editor.html.

When I choose the style from the style list, the html style class seems add to <span>. May I know whether it is possible to add the style to <ul> or <li>?

<ul>
<li><span class="mystyle">test</span></li>
</ul>

Thanks in advance.

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

Please have a look at these reference articles:-

Link:- http://blogs.adobe.com/contentmanagement/tag/custom-richtext/

//

1. Traverse to your component node (/apps/blog/components/content/demo) and create a child node of type cq:ClientLibraryFolder and name it clientlib.

2. Create a folder under  clientlib and name it css.

3. Create a file under css folder and name it static.css

4. Open your static.css and paste the below code in it. Save.

5. Traverse to your components fieldConfig node and create a new property for fieldConfig with name as externalStyleSheets and value as the path to the static.css that we created in last few steps .

6. Traverse to your rteconfig/rtePlugins/styles node (/apps/blog/components/content/rteconfig/rtePlugins/styles) and create a child node of type cq:WidgetCollection and name it styles (yes the name is same as parent nodes name).

7. Create a child node under this styles node (from step 1 above /apps/blog/components/content/rteconfig/rtePlugins/styles/styles): type of child node nt:unstructured and name it strikethrough

8. Create following properties for this strikethrough node:

    Property 1:

    name: cssName

    value: strikethrough

    Property 2:

    name: text

    value: StrikeThrough

Read the post to get step by step solution to your problem.

 

Link:- https://docs.adobe.com/docs/en/cq/5-6-1/administering/configuring_rich_text_editor.html#Styles (Tables and Table Cells)

//Style selector box in either the Cell properties or Table properties dialog

 

I hope these article will surly help you.

 

Thanks and Regard

Kautuk Sahni

View solution in original post

2 Replies

Avatar

Correct answer by
Administrator

Hi 

Please have a look at these reference articles:-

Link:- http://blogs.adobe.com/contentmanagement/tag/custom-richtext/

//

1. Traverse to your component node (/apps/blog/components/content/demo) and create a child node of type cq:ClientLibraryFolder and name it clientlib.

2. Create a folder under  clientlib and name it css.

3. Create a file under css folder and name it static.css

4. Open your static.css and paste the below code in it. Save.

5. Traverse to your components fieldConfig node and create a new property for fieldConfig with name as externalStyleSheets and value as the path to the static.css that we created in last few steps .

6. Traverse to your rteconfig/rtePlugins/styles node (/apps/blog/components/content/rteconfig/rtePlugins/styles) and create a child node of type cq:WidgetCollection and name it styles (yes the name is same as parent nodes name).

7. Create a child node under this styles node (from step 1 above /apps/blog/components/content/rteconfig/rtePlugins/styles/styles): type of child node nt:unstructured and name it strikethrough

8. Create following properties for this strikethrough node:

    Property 1:

    name: cssName

    value: strikethrough

    Property 2:

    name: text

    value: StrikeThrough

Read the post to get step by step solution to your problem.

 

Link:- https://docs.adobe.com/docs/en/cq/5-6-1/administering/configuring_rich_text_editor.html#Styles (Tables and Table Cells)

//Style selector box in either the Cell properties or Table properties dialog

 

I hope these article will surly help you.

 

Thanks and Regard

Kautuk Sahni

Avatar

Administrator

Hi

Can you please look at the answer posted and let us know if this worked for you or not.

If you have devised another way to resolve the issue, please post it in the community for communities benefit.

 

Thanks and Regards

Kautuk Sahni