Thursday, December 15, 2011

RadEditor From Inheriting Page's Backgound Image or Parent CSS

The Rich Text content area of RadEditor is an editable IFRAME element, which is a separate document that has its own CSS styles applied through the embedded in the Telerik.Web.UI.dll skin. This default content appearance in the content area can be easily overridden by setting the editor'sContentAreaCssFile property to point to your own CSS file. For example create a file named EditorContentAreaStyles.css and put a global body tag with the desired font and color settings in it, e.g.
body 
{
   font-family: Verdana !important;
   font-size: 18px !important;
   color: #99ff99 !important;
   background-color: #333333 !important;
   text-align: left !important;
   word-wrap: break-word !important;
}

Since the css file is loaded first on purpose, it is possible for another global class on the page to override its settings. To prevent the overriding of the properties defined in the EditorContentAreaStyles.css file just set the !important rule after the properties values (or use the editor's CssFiles property to load the css file).

Save the css file and set the ContentAreaCssFile property to point to it:

<telerik:RadEditor 
    ContentAreaCssFile="~/EditorContentAreaStyles.css"
    id="RadEditor1" 
    runat="server">
</telerik:RadEditor>

No comments:

Post a Comment