Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Add Span Class in rte text containing Anchor Tag

Avatar

Community Advisor
Hi
 
I want to add span class on the anchor tag in hyperlink. I have customized my LinkDialog.js as below
postprocessModel: function() { var linkRules = this.parameters.linkRules; if (linkRules) { linkRules.applyToObject(this.objToEdit); } if(!this.objToEdit.cssClass && this.objToEdit.target == '_blank' ){ var hrefPath = this.objToEdit.href; var extn = hrefPath.split('.').pop(); if(extn == 'pdf'){ this.objToEdit.cssClass = 'ext-or-pdf-link'; //After the class there should be <span class="test"></span> should be added } } },
I can see the anchor tag as like below.
 
<a href="https://forums.adobe.com/content/dam/geometrixx/test/sample.pdf" class="ext-or-pdf-link" target="_blank">cost of</a>
 
But need it to be as : <a href="https://forums.adobe.com/content/dam/geometrixx/test/sample.pdf" class="ext-or-pdf-link" target="_blank">cost of</a><span class="test"></span>
 
Any Idea for the same.

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 10

For your usecase customizing  LinkDialog does not make sense to me.  In case your use case is to skip link checker then I would have accepted overlaying.  Instead I would recommend to create a custom plugin following [1] .  

[1]   http://dev.day.com/docs/en/cq/5-6/developing/widgets.html#Example%203:%20Rich%20Text%20Editor%20%28R...

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

For your usecase customizing  LinkDialog does not make sense to me.  In case your use case is to skip link checker then I would have accepted overlaying.  Instead I would recommend to create a custom plugin following [1] .  

[1]   http://dev.day.com/docs/en/cq/5-6/developing/widgets.html#Example%203:%20Rich%20Text%20Editor%20%28R...

Avatar

Community Advisor

Sham HC wrote...

For your usecase customizing  LinkDialog does not make sense to me.  In case your use case is to skip link checker then I would have accepted overlaying.  Instead I would recommend to create a custom plugin following [1] .  

[1]   http://dev.day.com/docs/en/cq/5-6/developing/widgets.html#Example%203:%20Rich%20Text%20Editor%20%28R...

 

Thanks Sham,

Yes you are correct, the use case is to skip the link checker (i.e. "ok" button) and do a check on the type of link that is entered, hence the overlay. Now the overlay is working fine as expected. The only addition we require is addition of the span class to the anchor tag of the hyperlinked text, so that desired styling can be done through that span class. So is it possible to do that through this Linkdialog.js file?

Also, can you tell which jsp is called when the 'ok' button of the rte based component is clicked?