Sitefinity ASP.NET CMS is a web-based content management platform and Telerik's RadEditor plays a key role in managing the web site's content. RadEditor is a WYSIWYG web-based tool that makes it very easy to create rich-text content.
In my last post, I showed how to add new tools to Sitefinity's RadEditor. Among these tools are tools that allow editors to set the font, font size, font color and background color.
However, it's not recommended that editors be allowed to arbitrarily use any font settings. Doing this results in extra HTML (embedded styles) and inconsistent presentation. Instead, it's recommended that editors choose from a list of carefully selected stylesheets.
Identify the Styles to Apply to RadEditor
Before applying a new CSS style to RadEditor it's important to understand what can go wrong. Take, for example, the following style definition:
body {
background: #fff url(Images/bg.jpg) repeat-x top left;
color: black;
font-size: 25px;
margin:5px;
}
Notice the background image that will be tiled onto the background of the web page. Adding this stylesheet to RadEditor means that RadEditor will also use this background:
This probably isn't the result you're looking for. RadEditor will read the entire CSS file and apply it to the RadEditor window. This will include the custom styles we want, but also the styles we don't want. I recommend keeping RadEditor as clean & free of distraction as possible.
In order to do this, identify the styles that should be applied to RadEditor. Once identified, place these styles into a separate CSS file. Below is an example:
~/Custom/Admin/Common/radeditor.css
/* HTML STYLES */
body {
color: black;
font-size: 15px;
}
h1 {
font-family: Georgia;
font-size: 35px;
color: #fff;
margin: 0 10px;
}
/* CUSTOM STYLES */
.important {
color: Red;
font-size: 14px;
font-weight: bold;
}
.legal {
color: Gray;
font-size: 11px;
}
.quote {
background-color: #eeeeee;
font-style: italic;
padding: 10px;
}
Notice: Because this file resides outside the ~/App_Themes folder it won't be applied to the web site. In fact, the file above will only be used by RadEditor. This means these styles will need duplicated in the CSS file(s) used by your web site.
Alternately, you can put this file in your ~/App_Themes theme folder. Just be aware that these styles will then be applied to your public web site.
Applying Custom Styles to RadEditor
Figuring out what styles to apply to RadEditor is the hard part. Once finished, it's easy to point Sitefinity's RadEditor to your custom stylesheets.
Open the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml file.
Step 1: Add a mapping to the CSS file by adding a <cssFiles> section to the <root> section:
<cssFiles>
<item name="~/Custom/Admin/Common/radeditor.css" />
</cssFiles>
This section tells RadEditor how to find your CSS file.
Step 2: Add the custom styles that can be applied in RadEditor to the existing <classes> section:
<classes>
<class name="Important" value=".important" />
<class name="Quote" value=".quote" />
<class name="Legal" value=".legal" />
</classes>
Only custom styles need added to this list. Regular HTML styles (body, strong, p, etc.) will be applied automatically. These are the styles that will appear in the styles drop-down list.
Step 3: Add the ApplyClass tool to the RadEditor toolbar by adding the following <tool> item to one of the existing <tools> sections:
<tool name="ApplyClass"/>
Where you place this <tool> will change where the tool visually appears in the RadEditor toolbar.
Conclusion
Configuring custom styles in RadEditor is a wonderful way to empower editors while still producing good HTML and maintaining a consistent visual style.
For more information:
External CSS Files in RadEditor
Using RadEditor's ToolsFile.xml
