Add Span Class in rte text containing Anchor Tag | Community
Skip to main content
Shubham_borole
Community Advisor
Shubham_boroleCommunity Advisor
Community Advisor
October 16, 2015
Solved

Add Span Class in rte text containing Anchor Tag

  • October 16, 2015
  • 2 replies
  • 1777 views
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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sham_HC

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%28RTE%29%20Plug-in

2 replies

Sham_HC
Sham_HCAccepted solution
Level 10
October 16, 2015

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%28RTE%29%20Plug-in

Shubham_borole
Community Advisor
Shubham_boroleCommunity AdvisorAuthor
Community Advisor
October 16, 2015

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%28RTE%29%20Plug-in

 

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?

Terms & ConditionsAccessibility statement

Loading footer...