Level: 200
 

How to use snippets

Image of rulers

When you find yourself writing the same peace of html again and again or have some content that you write in the rich text editor that always should look the same but maybe with difference in text, you should consider making a snippet.

A snippet is a small peace of html that can be pasted into a html field in two clicks of your mouse.
And by using it you are sure that the html surrounding your text is always the same.

Written by: Jimmi Lyhne Andersen
Fri, Jun 26 2009

How to create a snippet

The way to create a snippet differs in Sitecore 5 and 6. The difference is in the database where the snippet is defined. In Sitecore 5 the snippets are defined in the master database and in Sitecore 6 the snippets are defined in the core database. Other than that the procedure is the same.

 

To access the core database, login to the desktop and use the database selector in the in the lower rigth corner next to the clock.

 

 

The snippets are defined in the snippet folder located here:
/sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Snippets

 

It could be that one of the other html editor profiles are used for the html field. If so you should create the snippet under this profile.

 

Create a snippet using the following template:
/sitecore/templates/System/Html Editor Profiles/Html Editor Snippet

 

This template consists of two fields, a header field and a value field.
In the header field you can write the name the editor will se when they choose the snippet and in the value field you input the html that should be pasted into the html field when the editor chooses the snippet.

 

Image of snippet item in core database


You are done! You have created a snippet. Now its time to use it. Remember to change Sitecore back to the master database.

How to use a snippet

This is the easy part, as it should be, after all wasn't that the purpose of creating snippets.
Go to the item where you want to use the html from the snippet and open the html editor.
When you press the ”Insert Code Snippet” button you will see the new snippet that you have just created.


 

Image of snippet code chooser in rich text editor

 

When you press ”My Snippet” the html from the value field of the snippet is inserted into the html editor. It's that easy.

 

I will end this article with a little warning. When you use snippets, make sure you get the html in the value field correct before you let anyone use the snippet. When it is use in 200 different items and you discover a mistake, fixing the snippet will not change the html in the items where it has been used.

 

Happy snippet creating, and thanks for reading this article.

 

Please rate this article


1 rates / 5 avg.

  • Picture of Jimmi Lyhne Andersen

    About the author:

    Jimmi Lyhne Andersen

    Jimmi Lyhne Andersen is the co-founder of LearnSitecore, and is a partner at Inmento Solutions.
    Jimmi has been lead developer and architect on several large public websites with 200+ editors, and is therefore focused on usability and accessibility.
    Jimmi is a certified Sitecore developer and a Microsoft Certified Professional Developer (MCPD).
    He has a bachelors degree in Computer Science and in Mathematics from the University of Copenhagen.

     

8 responses to "How to use snippets"

Well written article ... at a glance, I now know how to create snippets. Well done Jimmi.
Posted: Sunday, September 26, 2010 12:34 PM
Another important things is to test the snippet *extensively*. I have seen many situations where the HTML editor mangles the HTML code used in a snippet when editing. Take the given example snippet, when editing "NAME GOES HERE" in the HTML editor, the <div class="name"> might actually be converted to a <p class="name"> or other weirdness. Also the encapsulating <div class="contact"> will easily be lost after some editing. In my experience, any non-visual elements like div and span, are often lost in the HTML editor.
Posted: Wednesday, March 09, 2011 9:30 AM
Ah, I see the reply system could have used some more testing also; what I meant to write was: ...when editing "NAME GOES HERE" in the HTML editor, the <div class="name"> might actually be converted to a <p class="name"> or other weirdness. (Or when that doesn't work either: ...when editing "NAME GOES HERE" in the HTML editor, the [div class="name"] might actually be converted to a [p class="name"] or other weirdness.)
Posted: Wednesday, March 09, 2011 9:34 AM
...Also the encapsulating &lt;div class="contact"&gt;
will easily be lost after some editing.

<font size="10"><script>alert('Did you sanitize your input fields?')</script>
Posted: Wednesday, March 09, 2011 9:40 AM
Hi Peter

Thank you for pointing that out (insert embarressed smiley here).

I have fixed the code and cleaned up your posts.

As to your comment I totally agree. I do not think that snippets are a good solution to most problems. But it can be a cheap solution to a problem, where the owner of the site is not willing to pay for implementing a good solution.

-Jimmi
Posted: Sunday, April 03, 2011 4:33 PM
Is there a way to maintain the html formatting in a snippet? My users want a snippet to be controlled by a webcontrol to allow them to set a start and end date to some html content. This snippet will be placed in a rich text editor but all the html formatting is lost upon save.
Posted: Monday, September 19, 2011 5:06 PM
Excellent article - solved my issue immediately allowing me to create a snippet for other editors to use.
- needing to switch DB is a killer to remember!!

Thx
Posted: Monday, September 10, 2012 5:16 PM
xyz
I am not getting an option to insert snippet in the rich text editor.
Posted: Thursday, October 13, 2016 7:18 AM

Leave a reply


Notify me of follow-up comments via email.
 
 
#nbsp;