Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Adding image icons followed by hyperlink in rtf

Avatar

Community Advisor

Hi,

I am trying to add functionality to rtf (or rte based components) such that, if a text is provided using hyperlink functionality, then, after that hyperlink an image icon corresponding to the link type should be placed after the hyperlinked text.

For example, if I provide a pdf link to some text in rtf by using the hyperlink functionality, a pdf image icon will be placed after it. Something like in the image below/attached.

Any suggestions on what kind of approaches can be followed to achieve this?

Thanks

 

[img]hyperlink eg.PNG[/img]

1 Accepted Solution

Avatar

Correct answer by
Level 10
  • If authors are familiar with html syntax. Then you can enable source edit to achieve it.
  • Train others to use table with 2 columns and make border as zero. One column place text and link & other column add images. 
  • Otherwise you need to develop an custom plugin. 

View solution in original post

4 Replies

Avatar

Level 5

Hi,

Does anyone have any idea to implement this functionality in such a way place appropriate thumbnail correspond to hyperlink.

Thanks

Avatar

Correct answer by
Level 10
  • If authors are familiar with html syntax. Then you can enable source edit to achieve it.
  • Train others to use table with 2 columns and make border as zero. One column place text and link & other column add images. 
  • Otherwise you need to develop an custom plugin. 

Avatar

Community Advisor

Hi Sham,

A custom plugin was developed and overlayed for LinkDialog.js. If the extension for the entered link is ".pdf" then I am trying to add a span with class name "pdf-icon" to the anchor tag containing the href for the link entered. I have to add icons using svg

You can refer this http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...  

For this what I could find was that .append()  has been suggested to directly append the span with class name,  and getElementsByTagName() to get the anchor tag where the span is to be added. Unfortunately. this is some how not working may be because of the overlayed RTE JS. 

Any example on this that you might know of?

Avatar

Level 10

snbadobe wrote...

Hi Sham,

A custom plugin was developed and overlayed for LinkDialog.js. If the extension for the entered link is ".pdf" then I am trying to add a span with class name "pdf-icon" to the anchor tag containing the href for the link entered. I have to add icons using svg

You can refer this http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...  

For this what I could find was that .append()  has been suggested to directly append the span with class name,  and getElementsByTagName() to get the anchor tag where the span is to be added. Unfortunately. this is some how not working may be because of the overlayed RTE JS. 

Any example on this that you might know of?

 

 


responded in respective thread