Editor - Customize Content Area

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

Demo Configurator

Content Area Mode


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • EditorContentAreaDIVStyles.css
    • EditorContentAreaDIVStyles.css
    • EditorContentAreaStyles.css
    • EditorDefaultStylizaton.css
<%@ Page Theme="Default" Language="C#" Debug="true" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.SettingContentAreaDefaults.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link id="ContentAreaCssFile" href="EditorContentAreaDIVStyles.css" visible="false"
        runat="server" type="text/css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" Height="500px" ID="RadEditor1" runat="server"
            EditModes="Design" Width="800px">
            <Content>
                <h1>Title: Lorem Ipsum (Heading 1)</h1>
                <br />
                <h2>Section 1 (Heading 2): Neque porro quisquam</h2>
                <p> Duis turpis augue, varius vitae, lacinia vitae, luctus et, arcu. Ut tempor adipiscing urna. Integer commodo, neque vel ultrices sodales, sapien lacus lobortis neque, et pharetra sem sapien in erat. Etiam in erat ut neque facilisis consectetur. Sed imperdiet nibh. Maecenas hendrerit. Duis pretium sodales ligula. Morbi elit libero, tincidunt non, iaculis vel, iaculis at, nibh. Vivamus vel urna et nisi hendrerit cursus. </p>
                <br />
                <h3>Sub-section 1 (Heading 3): Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
                <p>Nulla odio. Maecenas eu diam dapibus leo fermentum imperdiet. Suspendisse pellentesque lorem at nisl. Cras lectus. Pellentesque non augue. Nulla convallis gravida risus. Sed erat odio, facilisis ut, vestibulum vitae, hendrerit in, dolor. Nunc risus justo, pretium at, blandit et, ornare vel, nisl. Proin magna erat, cursus eu, aliquam.</p>
                
                <h4>Sub-section 2 (Heading 4): Aenean ac nisi vel nisl vulputate consequat.</h4>
                <p>Vivamus et lacus sit amet augue placerat dignissim. Donec metus. Fusce placerat tellus a elit. Cras quis arcu. Vestibulum vel nulla id est pulvinar ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum neque odio, congue ut, tincidunt vitae, consequat ut, ante. Phasellus aliquet ornare urna. Integer sed mi at neque semper blandit. Etiam mollis. </p>
                
                <h5>Sub-section 3 (Heading 5): In imperdiet justo a nisl eleifend rhoncus</h5>
                <p> Nunc eu luctus nunc. Etiam ut enim tellus, nec sagittis arcu. Nulla est dolor, rutrum vitae scelerisque sed, tincidunt eget ligula. Aliquam nulla libero, vestibulum sit amet mattis ac, euismod vel justo.</p>

                <h6>Sub-section 4 (Heading 6) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
                <p>Fusce nisl turpis, vestibulum cursus faucibus et, pellentesque a purus. Aenean ac mauris dui. Nam et mi et eros elementum suscipit eget et urna. In hac habitasse platea dictumst. Sed eu viverra diam.<br />
                </p>
                <ol>
                    <li>tellus sit amet elementum faucibus</li>
                    <li>purus lectus egestas augue</li>
                    <li>in luctus nibh mauris sed ante.</li>
                </ol>
                <ul>
                    <li>Integer dignissim </li>
                    <li>risus in sollicitudin elementum</li>
                    <li>lacus neque lacinia justo</li>
                    <li>eu tristique tellus erat vitae nisl..</li>
                </ul>

                <table>
                    <tr>
                        <td>cell 1</td>
                        <td>cell 2</td>
                        <td>cell 3 </td>
                    </tr>
                    <tr>
                        <td>cell 4</td>
                        <td>cell 5 </td>
                        <td>cell 6 </td>
                    </tr>
                    <tr>
                        <td>cell 7</td>
                        <td>cell 8 </td>
                        <td>cell 9 </td>
                    </tr>
                </table> 
            </Content>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Enabled="false"></telerik:EditorModule>
            </Modules>
        </telerik:RadEditor>
    </div>

<telerik:RadAjaxManager runat="server" ID="AjaxManager1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadioButtonListContentAreaMode">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadEditor1" />
                <telerik:AjaxUpdatedControl ControlID="RadioButtonListContentAreaMode" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:RadioButtonList Orientation="Horizontal" OnSelectedIndexChanged="RadioButtonListContentAreaMode_SelectedIndexChanged"
                    ID="RadioButtonListContentAreaMode" runat="server" AutoPostBack="True" Label="Content Area Mode">
                    <asp:ListItem Value="IFRAME" Selected="True">Iframe</asp:ListItem>
                    <asp:ListItem Value="DIV">Div</asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?