Tuesday, 19 May 2009

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.

4 comments:

stevec said...

I once heard someone talk about allowing EditMenuName in comments, which would make the css validate. If you want it to validate today, you need to have two different .css files, one for editors and one for visitors (without EditMenuName).

Miklos Kanyo said...

Thanks a lot Marek! You saved me a few hours - I too forgot where this was :)

Just wanted to say that this works the same way for the Image Properties dialog (which I just had to do):

For that you only need to make sure you add the style classes like this:

img.[className] { EditMenuName: [display name]; }

E.g.:
img.wrap-right { EditMenuName: Wrap text; }

Miklos

Marek Blotny said...

Hi Mike,

I'm glad that this post was useful for you. And thanks for the tip regarding Image Properties dialog. I didn't know about that! :)

Anonymous said...

Hi,

I'm trying to implement custom styles in the rich text editor but I kind of got stuck.

My css file is like this:

1 : /* EPiServer.SpecializedProperties.PropertyXhtmlString */
2 : h1 { EditMenuName: Header 1;}
3 : h2 { EditMenuName: Header 2;}

The different menu items (Header 1, Header 2) are displayed correctly in the drop down list, so the stylesheet is loaded into the editor. But if I select some text in the editor and choose for example Header 1 from the drop down list, the editor only sets the tag UNKNOWNED after the text.

Help would be highly appreciated.