Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Customize Content Area

ContentAreaMode Options
Render RadEditor's content area as an editable:
   
  
 
 
   

  • 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.

    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.

     

    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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="vb" Debug="true" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"
        Inherits="Telerik.Web.Examples.Editor.SettingContentAreaDefaults.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <link id="ContentAreaCssFile" href="EditorContentAreaDIVStyles.css" visible="false" runat="server" type="text/css" rel="Stylesheet" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="ContentAreaMode Options"
                            Expanded="true" Style="text-align: left;" HorizontalAlign="Right" >
            <table width="100%">
                <tr>
                    <td valign="top" class="text">
                        Render RadEditor's content area as an editable:
    <asp:RadioButtonList RepeatDirection="vertical" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="RadioButtonListContentAreaMode_SelectedIndexChanged"
    CssClass="text" ID="RadioButtonListContentAreaMode" runat="server" AutoPostBack="True">

                            <asp:ListItem Value="IFRAME" Selected="True">IFRAME</asp:ListItem>
                            <asp:ListItem Value="DIV">DIV</asp:ListItem>
                        </asp:RadioButtonList>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>

        <telerik:RadEditor Height="500px" NewLineMode="P"
            ID="RadEditor1" runat="server" EditModes="Design">
            <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" />
            </Modules>
        </telerik:RadEditor>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451