ContentAreaMode="IFRAME" mode:
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's ContentAreaCssFile 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
: white !important;
background-color
: #555 !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>
To style other HTML elements in the content area you need to define global css classes for them, e.g. p, div, span, table, td, td, ol, ul, li, img etc
form
{
background-color:#efefef !important;
border:1px dashed #555555 !important;
}
table
{
BORDER-RIGHT: #999999 1px dashed !important;
BORDER-BOTTOM: #999999 1px dashed !important;
}
table td
{
font-size: 12px !important;
PADDING: 1px !important;
BORDER-TOP: #999999 1px dashed !important;
BORDER-LEFT: #999999 1px dashed !important;
}
div
{
background-color: Green !important;
color: Yellow !important;
font-weight: bold !important;
}
img
{
margin: 1px 1px 1px 1px !important;
border: solid 1px blue !important;
}
More information on the subject is available in the following help articles:
Setting Content Area Defaults,
Default Font for Editable Content,
Setting Editor Background And Color,
Content Area Appearance Problems.
If the editor is placed in non-editable mode (Enabled="false"), then its content is outputted in a DIV element on the page. This DIV element will inherit the page styles or the styles of its parent elements, but not the styles of the EditorContentAreaStyles.css file and therefore the content might look different in edit and non-editable modes.
Note that the RadEditor control has some default styling for some of the elements inside the content area, so that the user could easily interact with them in the Design mode. Using the ContentAreaCssFile property for custom stylization will override the default ones.
In addition to preserve or override this default stylization and preserve the user-friendly interface you could follow the EditorDefaultStylizaton.css file from the dropdown menu in the Source-code section.
ContentAreaMode="DIV" mode:
The DIV element is part of the current page and the page CSS styles will be directly imported and applied to the content area and the contents in it. In order to customize the content area appearance of the RadEditor in Div mode, register the CSS selectors manually on the page with the appropriate cascading (.reContentArea <global selector: P, FORM, IMG, TABLE, TR, TD, H1-H6, etc>), e.g.
.reContentArea /*this selector corresponds to the content area element when RadEditor is in DIV mode*/
{
font-family: Verdana !important;
font-size: 12px !important;
color: white;
background-color: #555 !important;
text-align: left !important;
word-wrap: break-word !important;
padding: 3px 15px 3px 15px !important;
}
.reContentArea P
{
margin: 0;
border: 1px solid #666;
color: #666;
font-size: 12px;
padding: 10px;
}
.reContentArea H1
{
margin: 0;
border: 1px solid #666;
color: #000;
padding: 20px;
}
.reContentArea OL
{
margin-top: 20px;
list-style-type: lower-roman;
border: 1px solid #666;
color: #555;
padding: 10px 10px 10px 55px;
}
.reContentArea table
{
BORDER-RIGHT: #99ff99 1px dashed;
BORDER-BOTTOM: #99ff99 1px dashed;
width:100%;
margin-top: 20px;
}
.reContentArea table td
{
font-size: 12px !important;
color: #555;
PADDING: 1px;
BORDER-TOP: #99ff99 1px dashed;
BORDER-LEFT: #99ff99 1px dashed;
text-align: center;
}
.reContentArea img
{
margin: 1px 1px 1px 1px;
border: solid 1px blue;
}
When the ContentAreaMode="DIV" is used the ContentAreaCssFile is not functional and the classes above should be registered manually using <link> and / or <style> tags.