November 7, 2013

Add a css class to the richtext editor

I already had another post on this topic but t see that this post is not up to date anymore. Here is the way to do that with recent versions of sitecore.

Checking the configuration
In the web.config, check the key WebStylesheet to know which css is used for the Richtext editor (default value is /default.css)

Configure the css class available
They are two different places where you need to configure the css classes:
  • The .css files (configured in the previous step)
  • The file:  \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml
Into the css file you may add the following sample code:
.test {font-weight: bold;}
.myTitle { font: bold; }
a.redLink { color: red; }
.title.subclass { color: blue; }

Into ToolFile.xml you may add the different classes like this:
<classes>
 <class name="MyTitle" value=".myTitle" />
 <class name="A red link" value="a.redLink" />
 <class name="A double class" value=".title.subclass" />
</classes>

If you use firefox you shouldn't experiment some caching issue but if you use IE or if you don't see your classes into the dropdown: clear your cache a ctrl+F5 way be not sufficent.

1 comment:

  1. Thank you for the clear, concise post. This is very helpful information.

    I tried adding a couple of these "double class" class options, but cannot get Sitecore to load it into the select box in the RTE. Any ideas why it's not working for me? The single classes work, but not double classes.

    ReplyDelete