When creating content within Sitecore, or any CMS for that matter, you would like to view the content exactly how it will appear on the live site. Sitecore allows you to specify a CSS file to load into the RadEditor.
This lets you view the styles in Design mode as they would appear on the published site and also populates the Apply CSS Class dropdown list with available CSS classes. Unfortunately, the standard behavior only allows a single style sheet and any class defined within it will be made available in the class dropdown. Often times this is less than ideal. Frequently, certain pages or elements of a page have special style rules that are not shared across the whole site. In this post we will show how to extend Sitecore to allow you to specify a style sheet and the classes available in the Class dropdown as part of the editor profile.
Before we can write code to load style sheets from the editor profile, we need to create items in the profile that will store that information. We start by creating a couple of simple templates in the core database. The Style Sheet template has just one field, Style Sheet Path. The Class template has two fields, Label and Selector.
Next, we duplicate an existing profile and add a couple of new folders and items based on the above templates. Note that the selectors specified in the Class items must appear in one of the style sheets that will be loaded or you will not see any effect after applying the class.
Finally, we switch back to the master database and add the path to our editor profile in the source field of a rich text field on one of our templates.
Sitecore 6.3 and Earlier
There has been an article on SDN for several years about loading dynamic style sheets. This serves as the basis of our code for Sitecore 6.3 and earlier. We extend the RADEditor page class and hide the Page_Load method with one of our own.
Most of the code in the Page_Load method here is lifted straight from the original code via Reflector. It is just locating the proper editor profile while taking security into account. Just now, we are more concerned with the AddStyleSheets method. This method looks under the profile item for a folder named “Style Sheets” and then loads the style sheet specified by each of its children. Then, it looks for a folder named “Classes” and adds an item to the CssClasses collection for each of its children. Adding items to this collection prevents the editor from automatically parsing the loaded style sheets to populate the Class dropdown. The result is that the dropdown contains only the classes that we explicitly configure for it, but the design mode can still correctly display additional classes.
Sitecore 6.4 and Later
In version 6.4, the EditorConfiguration class was introduced. A default EditorConfiguration type can be specified in the Web.config and that default can be overridden by each editor profile. These classes, which must extend Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration, have a series of methods that allow you add custom configuration logic to the RadEditor. We will take advantage of this to greatly simplify our code for more recent versions.
When it was first introduced, the EditorConfiguration class did not have a method specifically intended for customizing the style sheets that were loaded. Thanks to a suggestion from yours truly, the SetupStylesheets method was added in 6.4.1 rev. 110324. You can still use this method in 6.4.0, but you will need to override one of the other methods and use it for something that wasn’t strictly intended.
In the constructor here, we save a reference to the profile item. This saves us from having to repeat the couple of dozen lines of code to find the profile item that we had to have for earlier versions. The SetupStylesheets method here contains the same code that was in the AddStyleSheets method seen previously.
The last piece to our puzzle is the editor preview. This is the view of the Rich Text field you have before you click the Show Editor button. The implementation for the editor preview has not changed significantly since Sitecore 5, so a single version of this customization will suffice for all versions of Sitecore you are likely to come across.
Here we extend the Sitecore.Shell.Controls.RADEditor.Preview class and override the OnLoad method. The ID of the current field is extracted from the “fld” query string parameter. This is then used to lookup the source specified for the field. The source of a Rich Text field should be the path to an editor profile. Once the profile item is located, the link tags for the style sheets specified in in its “Style Sheets” folder are added to the Stylesheets placeholder.