Sitecore - Custom Code Snippets in Rich-Text Editor field

Add Custom Code Snippets in Rich-Text Editor field in Sitecore

Hello Devs,

If you want to have Html Formatting for the content displayed from Rich-Text Editor field in Sitecore than this blog post is for you.

How to add Custom Code Snippet in Rich-Text Editor?

Switch to Core Database in Sitecore.

     Navigate to the below mentioned path in Sitecore Path:/sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Snippets

 

Create a Custom Code Snippet Item in Sitecore as per your requirement from below Template.    

Sitecore Path: /sitecore/templates/System/Html Editor Profiles/Html Editor Snippet

Code Snippet Item would have two fields :

     Header (Name of the Snippet)

     Value (This is the field where you specify predefined block of HTML code)

     In my case I’m creating a PDF Icon Snippet that would display a PDF ICON for the Link.Below is the example of the Snippet.

Header: PDF Icon

Value : <p class="pdf-icon"><a href="#">Add Link</a></p>

I have created a css class named pdf-icon which would display 

the PDF Icon.

.pdf-icon

{

    background: url('/-/media/Test/Images/Icons/icon_pdf')center left no-repeat;

    padding-left: 30px;

}

How to Use the Custom Snippet in the Rich-Text Editor Field?

Switch to the Master Database and navigate to the Rich-Text editor field where you want to use the custom code snippet.

Click on the Insert Code Snippet Icon and click on the PDF Icon snippet.

You can see the Add link text is added.

Right-click the Add Link Text , select Properties

Select the PDF File and provide the Link Text as shown below.

Save and Publish the Item.

That’s it, you are done!!! Just view in Front-End whether your Custom Code Snippet is applied.