Custom Sitecore Rich Text Editor Styles

Bhavik Patel • 5/11/2015

One of the most important aspects of maintaining a WYSIWYG editing experience is to make sure that the CSS that is used for your website is the same CSS that is used for your rich text editor. In Sitecore, this is pretty easy to accomplish through configuration. Web.config has a line for you to specify your CSS file, and this file will then be used by the rich text editor during editing.

<setting name="WebStylesheet" value="/css/yourstylesheet.css" />

And it’s not just the rich text editor that will use this style sheet -- The previews of the rich text fields will also use the same style sheet for presentation in the Content Editor.

However, if you are using the ‘Apply CSS Class’ dropdown in your rich text editor, there is one drawback to this method. You’ll quickly notice that the dropdown is populated with every possible CSS class that you have specified in your style sheet. There is certainly nothing wrong with providing all possible CSS class options, but the list can become daunting enough to ward content authors away from using the ‘Apply CSS Class’ dropdown, and using inline styles instead.

To alleviate the issue, you essentially have two options.

Option 1: Create a separate stylesheet just for the rich text editor. With this option, you can provide all relevant CSS to have everything render in the rich text editor and fields correctly, while providing only certain class names in the ‘Apply CSS Class’ dropdown. The difficulty here is maintaining two separate style sheets. If you are using dynamic style sheet languages such as LESS or SASS, it will certainly be more maintainable to follow this approach.

Option 2: Modify the rich text editor’s configurations. As most of you know, Sitecore uses Telerik’s RadEditor for the editing of rich text fields. So, using Telerik’s configuration documentation, you can customize what appears in the ‘Apply CSS Class’ dropdown. To do this, edit the ToolsFile.xml file in the “[SitecoreWebRoot]\ sitecore\shell\Controls\Rich Text Editor” folder, and add the following in the configuration.

    <class name="Your Class 1" value="your-class-1" />
    <class name="Your Class 2" value="your-class-2" />
    <class name="Your Class 3" value="your-class-3" />

Which option you choose depends on what best suits your needs. Just note that with the second option, you will need to pay attention to upgrades, as Sitecore may modify the ToolsFile.xml file. In such cases, you will have to reapply the configurations after the upgrade is complete.

Bhavik Patel

Bhavik is a .NET developer with over 9 years of experience, focusing on Sitecore CMS for the last 3 years. He has worked on several Sitecore CMS projects in both single-site and multi-site scenarios, and truly enjoys how extensible it is. He has a passion for problem solving and using technology to create engaging websites and applications. Bhavik is a Sitecore Technology MVP, 2015 and 2016.

Explore topics:

Other Blog Posts from Bhavik Patel

Subscribe for insights, trends and big ideas