Customize rich text editor in SharePoint 2010

If you want to customize the OOTB Rich Text Editor in SharePoint 2010, without changing the core4.css, and without the SharePoint default Styles, you can do it as following.

This is an example to customize the following Dropdowns:

• Styles
• Markup Styles
• Font Size
• Font Face
• Highlight Color
• Font Color

1
Set the PrefixStyleSheet-Property of the RichHtmlField. The classname has to be lowercase!

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet="my-style-must-be-lowercase"/>

2
Create a new Stylesheet, for example with the name “MyRichHtmlStyles.css” and define all the Styles you need for the Dropdowns. For example like the following pattern. The -ms-name Propertie define the visible name in the Dropdown.

For the Markup-Dropdown

H1.my-style-must-be-lowercaseElement-H1
{
-ms-name:"My Heading";
font-size:4em;
font-weight:normal;
font-family: Impact;
}

For the Style-Dropdown

.my-style-must-be-lowercaseStyle-Normal-1
{
-ms-name:"My Normal";
font-family: Impact, Arial, sans-serif;
font-size: 8pt;
color: #676767;
background-color: #fff;
}

For the Font-Size-Dropdown

.my-style-must-be-lowercaseFontSize-1
{
font-size: 36pt;
}

For the Font-Face-Dropdown

.my-style-must-be-lowercaseFontFace-1
{
-ms-name:"My Impact";
font-family: Impact;
}

For the Font-Color-Dropdown

.my-style-must-be-lowercaseForeColor-1
{
-ms-name: "";
-ms-color:"Dark Red";
color: darkred;
}

.my-style-must-be-lowercaseThemeForeColor-1-0
{
/* [ReplaceColor(themeColor: "Light1-Lightest")] */ color: #F2F2F2;
-ms-name:"Light 1 Lightest";
/* [ColorName] */ -ms-color:"White";
}

For the Highlight-Color-Dropdown

.my-style-must-be-lowercaseBackColor-1
{
background-color: darkred;
-ms-name: "";
-ms-color:"Dark Red";
}

.my-style-must-be-lowercaseThemeBackColor-1-0
{
/* [ReplaceColor(themeColor: "Light1")] */ background-color: #FFFFFF;
-ms-name:"Light 1";
/* [ColorName] */ -ms-color:"White";
}

3
Include your new Stylesheet in the Masterpage or in the Pagelayout, for example as follow.

<SharePointWebControls:CssRegistration ID="CssRegistration3" name="<% $SPUrl:~sitecollection/Style Library/~language/MyRichHtmlStyles.css %>" runat="server"/>

After you delete the browser cache, you should see the new entries in the Dropdowns.

With this solution you can add each rich text editor his own styles – if necessary.