Rich Text Editor Profiles

March 15, 2011
Tags: Sitecore, Wysiwyg

This article was updated on 2014.5.16 to cover how to set the profile for Sitecore 7.

While doing research for another article I came across an article on Stack Overflow asking about Rich Text Editor Profiles. The author noted that nothing had been written on the topic so I thought I might go ahead and fill in the blank. So to start from the top for anyone new to Sitecore, when you're creating fields on a template you select a Rich Text Editor as a field type. This will allow content editors to use the Telerik wysiwyg editor when they click to edit that field. If you use the stock Rich Text Editor field you'll notice that there are very few buttons to use and might wonder why it's so very bare. Sitecore does provide for a more robust toolbar but this is just one of may settings that you will have to configure to get the most use out of it. Let's walk through how you might go about doing that.

First  expand the template you're working on so that you can see the child node that has the Rich Text  Editor type selected. You'll see below that the Source field below is blank.

Rich Text Editor Field Source Blank

You'll want to click on the "Insert link" text above the Source field so that you can set it. When you do you'll be given a dialog window that will ask you to browse the content tree to select the source item. Here you'll need to drill down into the tree to /sitecore/system/Settings/Html Editor Profiles I'm going to select Rich Text Editor Medium. Now looking at the tree you may think this is the master database but it's not you're actually browsing the core, but I'll go more into that later.

Select Rich Text Editor Field Source Dialog Window

 Once you hit the "Open" button you'll be brought back to the field source and now see that there is a value selected. Hit save to store this value.

fieldSource.jpg

Now when you go to an instance of the template you're working on and open the wysiwyg editor you'll see that the toolbar has changed. I've detailed the different profile types below with their corresponding images.

RTE Default

Rich Text Editor Default

RTE Medium

 Rich Text Editor Medium

RTE IDE

 Rich Text Editor IDE

RTE FULL

 Rich Text Editor Full

You'll see that each progressive choice gives you more options. Now let's go back to the core and see what's working behind the scenes a bit. Switch to the core database and browse to /sitecore/system/Settings/Html Editor Profiles also provided in the image below.

Core Profile Item Location

 If you open the Rich Text Default folder you'll see a lot of folder and items. The most relevant is the Toolbar 1 item. If you expand that you'll see the buttons that you are provided in the editor. It's important to note what the template types of the different nodes are if/when you decide to work with them since if you don't use the provided system templates you're new custom widget likely won't load.

core default toolbar buttons

Now drilling down just a little further if you select the "Insert Sitecore Link" item, you'll see the field are few.

core insert link button

The "Click" field is really the only thing populated and you'll probably be left guessing what that actually links to. Well it's actually a reference in a javascript files located at /website/sitecore/shell/controls/rich text editor/RichText Commands.js. I've copied a snippet from the file below so that you can see what the reference looks like.

 rich text commands js file

Now you might be asking what about if I need to customize a profile or create my own buttons. Well depending on what you want to do you could just duplicate the RTE Full folder and then trim what you don't want. If on the other hand you want to create some custom buttons you may want to refer to my other article about adding custom buttons. Well hopefully you're a little bit more knowledgable than before and if you have questions hit me up on the comments section.

*Update for Sitecore 7

In Sitecore 7 the HTML editor profiles have been moved from the master db to the core. Unfortunately this means that you can no longer browse to the settings using the source button on the field item. What you will need to do is paste the path into the source field on the template item on the builder tab. Here's a screenshot:

Rich text editor builder

and here are the available paths:

  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Default
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Full
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text IDE
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Medium