How to define custom styles in EPiServer's Rich Text Editor

EPiServer's Rich Text Editor (RTE) can be customized in a number different ways. Unfortunately not all available options are well documented. Defining your own set of styles available in RTE is one of those things.


I always struggle to recall how to change this dropdown even though I have done it number of times. Therefore I have decided to simply write it down. Styles visible above are defined with this code:

   1:  /* EPiServer Editor Class names, required for WYSIWYG editor dropdown */

   2:  h1 { EditMenuName: Header 1; }

   3:  h2 { EditMenuName: Header 2; }

   4:  h3 { EditMenuName: Header 3; }

   5:  h4 { EditMenuName: Header 4; }

   6:  h5 { EditMenuName: Header 5; }

Of course your are free to add as many styles as you like, important is to define styles with EditMenuName keyword.

Having CSS ready you still have to make it visible to the editor. In old times, when Edit and Admin mode files were part of each solution it was a matter of editing this file: \Util\styles\editor.css. But nowdays, Edit and Admin mode files are located outside the solution, in Program Files folder, so they are shared among all applications. (since EPiServer 5 R2) Because usually different applications use different styles, and also I would say that it's a good practice to keep all "parts" of application in one place, we can't use old approach anymore. So what is a new approach?

Answer is simple, create separate CSS file for your application which will be used by RTE. Creating such file is a good thing anyway as content editors expect similar experience when editing content in edit mode and browsing the site in view mode. If on your site text inside H1 tags is displayed in blue then you should get the same visual result in edit mode. This is the main point of creating special CSS file for RTE. Customization of style dropdown can be done in a meantime :)

Let's say that your file is ready, final question is how you can configure EPiServer to load your file in edit mode. It can be done in two ways:

• in web.config, update EPiServer's stite configuration by changing uiEditorCssPaths property in a following way uiEditorCssPaths="~/css/rte.css"
• or alternatively you can set this property in Admin mode:
  
  

Outcome of both options is exactly the same, in edit mode Rich Text Editors will "get" your CSS file, dropdown will use your styles and configuration will be saved in web.config.