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.
