Rich Text Editor Drop-down Classes in Sitecore 8

The Rich Text Editor in Sitecore is remarkably flexible in terms of customising to make life easier for our editors. Part of this is adding classes to the Apply CSS Class drop-down, here you can define classes to match your corporate branding and hopefully reduce the temptation for editors to go mad in the HTML tab, (or even allowing you hide the HTML tab entirely (core database - security permissions)). 

This blog was inspired by sifting through several posts to find out how adding these classes is different in Sitecore 8 > 

 The community of course is always a good starting place and this post does in the end provide the answer. 

https://community.sitecore.net/developers/f/8/t/2114

I did however think it deserved a simple summary so here we go. 

Steps 

The old way

1. Add you classes to your main CSS, these days we mostly include a SCSS (SASS) file as compiled CSS is modular and much easier to work with than on huge file
2. Add you CSS to your editor file, this file is used to display your edits in the RTE editor window and keeping it in sync with your front end CSS help avoiding editor confusion 

How this editor file is defined and included will differ depending on your solution. 

The default Sitecore install uses a web.config setting:

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

Note: I'm writing this based on a Habitat solution so with everything Habitat the web.config is broken out in many separate .config files. The base solution includes a theming.config shown below: 

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">

  <sitecore>

    <pipelines>

      <mvc.getPageRendering>

        <processor type="Sitecore.Foundation.Assets.Pipelines.GetPageRendering.AddAssets, Sitecore.Foundation.Assets">

          <defaultAssets hint="raw:AddAsset">

            <asset type="Css" file="/assets/plugins/font-awesome/css/font-awesome.min.css" />

            <asset type="Css" file="/assets/plugins/simple-line-icons/simple-line-icons.min.css" />

            <asset type="Css" file="/assets/plugins/animate/animate.min.css" />

            <asset type="Css" file="/assets/SX.Sitecore.Theming.css" />

            <asset type="Css" file="/assets/SX.Omnes.Font.Dev.Environment.css" />

            <asset type="JavaScript" file="/Scripts/jquery-2.1.4.min.js" location="Head" />

            <asset type="JavaScript" file="/Scripts/jquery-ui.min.js" location="Head" />

            <asset type="JavaScript" file="/scripts/bootstrap3-typeahead.min.js" location="Head" />

            <asset type="JavaScript" file="https://use.typekit.com/ord5ubi.js" location="Head" />

            <asset type="JavaScript" file="/javascripts/bootstrap.min.js" location="Body" />

            <asset type="JavaScript" file="/scripts/SX.Sitecore.Theming.js" location="body" />

          </defaultAssets>

        </processor>

      </mvc.getPageRendering>

    </pipelines>

    <settings>

      <setting name="WebStylesheet" value="/assets/SX.Sitecore.Theming.Editor.css" />

      <setting name="WFM.EnableBootstrapCssRendering" >

        <patch:attribute name="value" value="false" />

      </setting>

    </settings>

  </sitecore>

</configuration> 

The style-sheet that is defined there will be used to populate the drop-down and used in the RTE. The gotcha with this is that everything in this style-sheet will be shown in the drop-down, using the class name which are often not descriptive or understandable. Things like anchor attributes will also be shown which is just messy and confusing for editors. 

The better solution is used in Sitecore 8 and uses 3 files 

The new way 

• yourMain.css
• yourEditor.css
• ToolsFile.xml 

ToolsFile.xml is found here: 

\inetpub\wwwroot\sitecore\Website\sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml

This xml file defines the tools in the RTE and one of the nodes is <classes> which defines the classes in the drop-down. Here you can define a friendly name for your classes and point it to the corresponding CSS class using the value attribute. 

i.e. <class name="Green Button" value=".green-button" />

Get these three ducks in a row and your good to go. 

Don't forget to clear your cache after making changes, some browsers may be reluctant to show your changes.   

As an aside the ToolsFile.xml also allows you to define the HTML snippets and custom links in the RTE, again useful for making the job easier for your editors and avoid them pushing presentation language tasks back to the dev team.  

Hope this is useful for someone. 

UPDATE

The order that the classes are shown in the 

• yourEditor.css

file, determines the order they will appear in the drop down, not the order that they are defined in 

• ToolsFile.xml