How to customize my AEM CQ Richtext Component?

[benDSt3ck]

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?

[Jitendra_S_Toma]

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?

[edubey]

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

[Jitendra_S_Toma]

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

[benDSt3ck]

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?

[benDSt3ck]

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.

[Jitendra_S_Toma · Accepted solution]

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.

[benDSt3ck]

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.