New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Decorating Div Content Area

This help article explains how to decorate the content area of RadEditor when the ContentAreaMode property is set to Div.

When ContentAreaMode is set to Div, external CSS files cannot decorate the content area. This is because the <div> element rendered as content area does not have a <head> element. Therefore, any styles that should decorate the content area should be loaded directly in the page, where RadEditor is loaded.

To read more about decorating the editor's content area examine the Setting Default Stylization and Using ContentAreaCssFile Property articles.

The recommended approach to style a DIV content area is to target the elements in the content are using the reContentArea class and prevent the usage of global styles in the page (Example 1).

Figure 1: The result from the CSS rules in Example 1.

Example 1: CSS styles that decorate RadEditor with ContentAreaMode set to Div.

<style>
    /* Default styles for the content area */
    div.reContentArea {
        font-family: Verdana;
        font-size: 12px;
        color: white;
        background-color: #555;
        text-align: left;
        word-wrap: break-word;
    }

        div.reContentArea h1,
        div.reContentArea h2,
        div.reContentArea h3 {
           color:#f2af77;
           font-weight:normal;
        }

        div.reContentArea table,
        div.reContentArea table td {
            border-collapse:collapse;
            border:2px dashed #f2af77;
        }
</style>

<telerik:RadEditor RenderMode="Lightweight" ID="Editor" runat="server" ContentAreaMode="Div" Skin="Silk">
    <Content>
        <h1>This is a Heading</h1>
        <p>Plain paragraph.</p>
        <h2>Second Heading</h2>
        <table>
            <tr><td>Cell 1</td><td>Cell 1</td></tr>
            <tr><td>Cell 1</td><td>Cell 1</td></tr>
        </table>
    </Content>
</telerik:RadEditor>

See Also

In this article