Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to customize my AEM CQ Richtext Component?

Avatar

Level 2

I have been working on a custom AEM component that includes a title, image and a richtext field. I have been able to get the components to work using the OTB features except I can not get the RichText xtype to create the HTML to meet the specification I have been given by my designer. The format I need to hit is '<p class="lede"></p>'. I created a format node called p-lede and entered the tag as p class="lede", but it still only entered the standard '<p></p>' tag. Any thoughts on how I can accomplish this?

1 Accepted Solution

Avatar

Correct answer by
Level 9

Well,

What about adding a javascript at component level, which finds "P" tag and add a class (added a node level).

In richtext.jsp

<% String className = read class name from the node property using JCR NODE API%>

$(document).ready(function(){

    $(".richtext").find("p").addClass(className)

});

You could also do the same using using Java (scriptlet code). All you need to do is get authored text from the node and before rendering just replace "<P>" with  "<p class=className"> and rending the final output string.

Let me know if you need more clarity on this.

View solution in original post

7 Replies

Avatar

Level 9

Here are the few good tutorials.

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html#Pa... Formats

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

Hope this might help you.

 

benDSt3ck wrote...

I have been working on a custom AEM component that includes a title, image and a richtext field. I have been able to get the components to work using the OTB features except I can not get the RichText xtype to create the HTML to meet the specification I have been given by my designer. The format I need to hit is '<p class="lede"></p>'. I created a format node called p-lede and entered the tag as p class="lede", but it still only entered the standard '<p></p>' tag. Any thoughts on how I can accomplish this?

 

Avatar

Level 10

Did you refer to any documentation for applying p-lede?  ( tag '-' class) to make this work

Avatar

Level 9

I hope this is what you are looking for.

      
cq:htmlTag nt:unstructured Returns additional tag attributes that are added to the surrounding html tag. Enables addition of attributes to the automatically generated divs. See Modify the auto-generated DIVs using cq:htmlTag blog post.

http://dev.day.com/cemblog/en/experiencedelivers/2013/04/modify_the_auto-generateddivs.html

--

Jitendra

Avatar

Level 2

Thanks for the response. I have actually read through this documentation previously and unfortunately it did not answer my questions. According to the documentation in both the official documentation from Adobe and from the blog, it shows how to change the paragraph to a different tag <p> to a <h1> etc. and it shows how to add span classes to sub text in a paragraph, but it does not show had to replace a paragraph tag <p> with a paragraph tag with a class (p class="lede"). Any other thoughts you might suggest?

Avatar

Level 2

I also tried the cq:htmlTag suggestion. I was very hopeful with this suggestions, but unfortunately it looks like this applies at the component level and I need to be able to change the class and html tag at the format level of the Richtext editor. I did try and see if the same concepts worked at the format level, but it still looks like the Richtext system only supports a generic HTML tag for the format and a span for the style.

Avatar

Correct answer by
Level 9

Well,

What about adding a javascript at component level, which finds "P" tag and add a class (added a node level).

In richtext.jsp

<% String className = read class name from the node property using JCR NODE API%>

$(document).ready(function(){

    $(".richtext").find("p").addClass(className)

});

You could also do the same using using Java (scriptlet code). All you need to do is get authored text from the node and before rendering just replace "<P>" with  "<p class=className"> and rending the final output string.

Let me know if you need more clarity on this.

Avatar

Level 2

Thanks for the advice. I will try that suggestion. I was hoping to do something with out having having to manipulate the code upon render so that I can ensure the code stored in the repository had the correct formatting. But I will try this and see how it goes.