|
Setting Content Area Defaults
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
CssFile 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: #555555 !important;
}
Save the css file and set the CssFile property to point to it:
<telerik:RadEditor id="RadEditor1" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="~/EditorContentAreaStyles.css" />
</CssFiles>
</telerik:RadEditor>
To style other HTML elements in the content area you need to define global css classes
for them, e.g. table, td, td, div, span, etc
form
{
background-color:#efefef !important;
border:1px dashed #555555 !important;
}
table
{
BORDER-RIGHT: #999999 1px dashed;
BORDER-BOTTOM: #999999 1px dashed;
}
table td
{
font-size: 12px !important;
PADDING: 1px;
BORDER-TOP: #999999 1px dashed;
BORDER-LEFT: #999999 1px dashed;
}
div
{
background-color: Green;
color: Yellow;
font-weight: bold;
}
img
{
margin: 1px 1px 1px 1px;
border: solid 1px blue;
}
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.
External CSS Files
By default, RadEditor populates its "Apply Css Class" dropdown with the CSS classes available in the current page. However, it can be configured to load external CSS files instead. This scenario is very common for editors integrated in back-end administration areas, which have one set of CSS classes, while the content is being saved in a database and displayed on the public area, which has a different set of CSS classes.
Thanks to the CssFiles and telerik:EditorCssFile inner-tags , you can specify a list of CSS files, which you need the editor to use, e.g.
<telerik:RadEditor id="RadEditor1" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="~/ExternalCssFile1.css" />
<telerik:EditorCssFile Value="~/ExternalCssFile2.css" />
</CssFiles>
</telerik:radeditor>
|