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

Displaying RadEditor as a TextBox

Registration Form

  • First Name
  • Last Name
  • Occupation
  • Resume
    • 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

In order to produce a textbox-like RadEditor follow the steps below:
  1. Register the following css classes:

    <style type="text/css">    
        /* The following CSS needs to be copied to the page to produce textbox-like RadEditor */
        
        .reLeftVerticalSide, 
        .reRightVerticalSide, 
        .reToolZone,
        .reToolCell
        {
            background: white !important;
        }
        
        .reToolCell
        {
            display: none\9 !important; /* for all versions of IE in order to prevent border bottom disappearing */
        }
        
        .reContentCell
        {
            border-width: 0 !important;
        }
        
        .formInput
        {
           border: solid 1px black;
        }
        
        .RadEditor
        {
            filter: chroma(color=c2dcf0);
        }
        
        .reWrapper_corner,
        .reWrapper_center 
        {
            display: none !important; /* for FF */            
        }
        
        td.reWrapper_corner,
        td.reWrapper_center 
        {
            display: block\9 !important; /* for all versions of IE */            
        }
        
        </style>
  2. Hide the Html and Preview Mode buttons by setting: EditModes="Design"
     
  3. Set the ToolbarMode property to ShowOnFocus: ToolbarMode="ShowOnFocus"
     
  4. Load only a few buttons in the Toolbar. In the example, the editor loads BasicTools.xml via its ToolsFile property: ToolsFile="~/Editor/Examples/EditorAsTextBox/BasicTools.xml"
     
  5. Set the toolbar width via the ToolsWidth property, e.g. ToolsWidth="330px"
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
  • BasicTools.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.Default.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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 href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadAjaxPanel runat="server">
                <h2>Registration Form</h2>
                <ul class="form">
                    <li><span class="label">First Name</span><telerik:RadTextBox RenderMode="Lightweight" runat="server" Width="250px"></telerik:RadTextBox></li>
                    <li><span class="label">Last Name</span><telerik:RadTextBox RenderMode="Lightweight" runat="server" Width="250px"></telerik:RadTextBox></li>
                    <li><span class="label">Occupation</span><telerik:RadTextBox RenderMode="Lightweight" runat="server" Width="250px"></telerik:RadTextBox></li>
                    <li><span class="label">Resume</span>
                        <telerik:RadEditor RenderMode="Lightweight" Height="150px" Width="328px" ToolsWidth="308px" EditModes="Design" EmptyMessage="Click in the content area to show the toolbar"
                            ID="RadEditor1" runat="server" ToolbarMode="ShowOnFocus" ToolsFile="~/Editor/Examples/EditorAsTextBox/BasicTools.xml">
                        </telerik:RadEditor>
                    </li>
                    <li>
                        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Submit" Text="Submit"></telerik:RadButton>
                    </li>
                </ul>
            </telerik:RadAjaxPanel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance