Custom styles in EPiServer WYSIWYG

If you've been using EPiServer for a while you'll know the frustration of the built in WYSIWYG editor for rich text entry. It's IE only and rather clunky.



There is a way to add your own custom HTML and CSS classes into the editor which get added to a drop down box.



By selecting an item from this drop down you can insert both HTML tags and classes into the text.

To do this you need to set the 'Path to CSS file for Editor' either in the Web.Config

<sitesettings uieditorcsspaths="/styles/episerver.css" />

In the CSS file the secret is a custom style attribute called EditMenuName which gives the name to put in the drop down list in the editor:

/*
Inserts <h1> </h1>
*/
h1
{
   EditMenuName:Heading1;
}

/*
Inserts <h2> </h2>
*/
h2
{
   EditMenuName:Heading2;
}

/*
Inserts <p class="intro"> </p>
*/
p.intro
{
   EditMenuName:IntroParagraph;
   padding-bottom: 1em;
   border-bottom: 1px solid #E8E8E8;
}

/*
Inserts <div class="box white"> </div>
*/
div.box white
{
   EditMenuName:Rounded Corner Box;
   border: solid 1px #E8E8E8;
   padding: 10px;
}