How to Add Code Snippets in Sitecore XM Cloud’s Rich Text Editor

Unlock the Power of Code Snippets in Sitecore XM Cloud’s Rich Text Editor

The Rich Text Editor or the WYSIWYG is a powerful tool that allows authors to create flexible stylized copy without the need of any developer’s help. The basic required knowledge of HTML can be from basic CSS classes to just knowing how a Rich Text Editor works with the different buttons available, basically like working on a Word Document.

There are limitations to how much the styling can be setup by a developer. This can be based on the basic buttons we get like styling text by their tags like <p>, <h1>, <h2> to things like <ol>, <ul> and <li>. Sometimes there are certain requirements that exceed this or may present two different stylings for authors to use. The Sitecore Rich Text Editor has a tool which can solve this problem. We can simply add a list of code snippets authors can use to get a head start of these variations without the need to know the HTML code behind them.

Setting Up Code Snippets in Sitecore XM Cloud

1. Navigate to the Desktop of your XM Cloud project

   

2. Make sure you are in core and not in master, switch to code otherwise

   

3. Open the Content Editor, in Desktop mode, you can click on the bottom left icon to see a list of options. You can reach the Content Editor this way as well.

   

4. Navigate to /sitecore/system/Settings/Html Editor Profiles

   

5. Depending on what profile you want to set this up, in our case we want it inside Rich Text Default, open that folder and you will see a Snippets folder

   
6. Insert a new item, the template we will need is /sitecore/templates/System/Html Editor Profiles/Html Editor Snippet

7. There are two fields we can author here
   1. Header - this will be what is shown to the author when opening the dropdown
   2. Value - the predefined code snippet will need to be pasted here.
8. Switch back to master and navigate to the Rich Text you would want the code snippet

9. Open the Snippet dropdown and select the snippet we have just create, you will see it added directly into our Rich Text Editor.

   

Things to Take Note When Creating Your Code Snippet

Creating our code snippets can be simple but allowing it to be fully usable for our authors is a different thing. We’ll have to take into account that the code snippet may need to be tweaked to allow the authors to continue editing smoothly.

1. Code snippets need to be fully fleshed out - an example would be a styled bullet list. You will have to add a couple of bullet points ahead with some placeholder text. Simply adding a <ul> or <ol> and no <li> tags will probably not make your code snippet as editable as you hoped it to be.
2. Placeholders - always make sure to add in placeholder text or images. You cannot simply add in empty HTML tags and expect it to be editable right away. Unless the author is confident with using the HTML Editor, you might end up having your code snippet unusable.

Feeling Motivated Yet?

Now that we’ve learned how to add code snippets into our Rich Text Editor we allow our authors to add in pre-styled content where they will only have to update certain copy. Just by reading and learning about it even now I can think of different ideas where I create new snippets which can help authors add in content way faster. Think about the possibilities and you’ll be able to help them out yourself too.