RTE Inserting/Rendering Link Appending Text

Question

I am looking for the best way to append to the text of a RTE media link (PDF file type). Either on the insert or when the link is being rendered. I looked at the MediaProvider and I noticed that only returns the link and not the html with the text. I also looked at Rich Text Commands.js file and found that is where the final link is being generated. So possibly I can append on insert if that is the correct place. Ideally though I would like to do it when the link is rendered. Has anyone done something similar?

Here is the code that I want to accomplish. You will see the font awesome markup is write before the link text.

<a href="-/media/E4CE71E2A24C4ACAA6B9AE21E9F1DA64.ashx"><span class="pdflink"><em class="fa fa-file-pdf-o"></em></span>PDF Text Title</a>

Thanks

Answer 1

The Sitecore way to replace the text in a Rich Text field would be to create a custom processor in <renderField> pipeline, insert it before RenderWebEditing to ensure all links in fields are expanded. You would then need to wrap the text of the all <a> elements which links to a pdf with the additonal markup you require, probably best done using something like HtmlAgilityPack which is available in a default install of Sitecore. The process is very similar to this blog post by John West about adding Title attributes to images in Rich Text fields. You can see the code in the Github repo.

If you are using Glass Mapper then you will additionally to use the ForceRenderField setting to force the field to run through the RenderField pipeline or create a custom Data Mapper since Glass does not use the pipeline in Normal or Preview mode.

But, it looks like you are trying to show an icon using FontAwesome on all links to pdf files. I suggest that this is much more easily achieved using CSS, the endswith attribute selector and ::before selector with content to set the icon.

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <p>this is some sample text</p>
  <p><a href="/-/media/document.pdf">this is a document link</a></p>
  <p><a href="/some/page">this is a regular link</a></p>
</div>

CSS:

a[href$=".pdf"] {
  font-weight: bold;
  padding-left: 0.25em;
}

a[href$=".pdf"]:before {
    content: "\f1c1";
    font-family: FontAwesome;    
    float: left;
    font-size: 1.5em;
 }

Output:

You can see a Codepen demo here.

You can find the unicode character code for each icon one the FontAwesome site, for example for file-pdf-o: