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.
<classes>
<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" />
</classes>
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.