Editor / Customize Content Area

Setting Content Area Defaults

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.

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.

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 body selector when RadEditor is in Iframe 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.