Editor

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadEditor - Telerik's ASP.NET Editor

RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
 
 
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   
Configure RadEditor
Change Edit Mode:

Choose tools file:

Choose module:

Enable/Disable RadEditor:
New Lines as:

Toolbar Mode:
select
* Note that RadRibbonbar still does not offer MetroTouch Skin

tlrk.it/1dSIrex To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1dSIrex

About RadEditor for ASP.NET AJAX

RadEditor is not simply an HTML Editor. It is what Microsoft chose to use in MSDN, CodePlex, TechNet, MCMS and even as an alternative to the default editor in SharePoint . Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean XHTML output, fast rendering, widest cross-browser support, and tons of features. What is more, important enhancements make it the first accessible rich text web editor on the market, offering accessibility support for its sight-impaired users.

RadEditor and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Editor demo, you can use the following path to find it in the sample website application:
editor/examples/overview

Key Features

  • Single-file, drag-and-drop deployment
  • Built on top of ASP.NET AJAX
  • Unmatched loading speed
  • Minimalist script size factor
  • Full keyboard accessibility
  • Custom design ready
  • New semantic rendering
  • Simplified and intuitive configuration
  • Industry-best cross-browser support
  • Out-of-the-box XHTML-enabled output
  • Integrated controls

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.Overview.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="~/Editor/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>ASP.NET Editor Demo | RadEditor Control</title>
     <style type="text/css">
          .qsf-demo-container {
                max-width: 100% !important;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnRequestStart="allowToolbarModeChange">
     <table cellspacing="0" cellpadding="0">
          <tr>
               <td style="vertical-align: top;">
          
                              <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="675px">
                                   <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"
                                        UploadPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"
                                        DeletePaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"
                                        EnableAsyncUpload="true"></ImageManager>
                              </telerik:RadEditor>
               </td>
               <td style="padding: 0 0 0 50px; vertical-align: top;" id="decorationZoneElement">
                    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure RadEditor"
                         Expanded="true" Style="text-align: left;" HorizontalAlign="Right" Width="280">
                                   <div style="padding: 8px;">
                                        <strong>Change Edit Mode:</strong>
                                        <asp:Label ID="lblEditModes" runat="server" EnableViewState="false"></asp:Label>
                                        <asp:CheckBoxList RepeatDirection="Vertical" Width="280px" CellPadding="0" CellSpacing="0"
                                             OnSelectedIndexChanged="CheckBoxListEditMode_SelectedIndexChanged" CssClass="text"
                                             ID="CheckBoxListEditMode" runat="server" AutoPostBack="True">
                                             <asp:ListItem Value="Design" Selected="True">Design Mode</asp:ListItem>
                                             <asp:ListItem Value="Html" Selected="True">Html Mode</asp:ListItem>
                                             <asp:ListItem Value="Preview" Selected="True">Preview Mode</asp:ListItem>
                                        </asp:CheckBoxList>
                                   </div>
                                   <div style="padding: 8px;">
                                        <strong>Choose tools file:</strong>
                                        <asp:RadioButtonList RepeatDirection="Vertical" Width="280px" CellPadding="0" CellSpacing="0"
                                             OnSelectedIndexChanged="RadioButtonListEditMode_SelectedIndexChanged" CssClass="text"
                                             ID="RadioButtonListEditMode" runat="server" AutoPostBack="True">
                                             <asp:ListItem Value="FullSet">Full set of tools</asp:ListItem>
                                             <asp:ListItem Value="Default" Selected="True">Default</asp:ListItem>
                                             <asp:ListItem Value="BasicTools">Basic toolset</asp:ListItem>
                                        </asp:RadioButtonList>
                                   </div>
                                   <div style="padding: 8px;">
                                        <strong>Choose module:</strong>
                                        <asp:CheckBoxList RepeatDirection="Vertical" Width="280px" CellPadding="0" CellSpacing="0"
                                             OnSelectedIndexChanged="CheckBoxListModules_SelectedIndexChanged" CssClass="text"
                                             ID="CheckBoxListModules" runat="server" AutoPostBack="True">
                                             <asp:ListItem Value="RadEditorStatistics" Selected="true">Rad Editor Statistics</asp:ListItem>
                                             <asp:ListItem Value="RadEditorDomInspector" Selected="true">Rad Editor Dom Inspector</asp:ListItem>
                                             <asp:ListItem Value="RadEditorNodeInspector" Selected="true">Rad Editor Node Inspector</asp:ListItem>
                                        </asp:CheckBoxList>
                                   </div>
                                   <div style="padding: 8px;">
                                        <strong>Enable/Disable RadEditor:</strong>
                                        <asp:RadioButtonList ID="RadioButtonListEnabled" Width="280px" runat="server" AutoPostBack="true"
                                             RepeatDirection="Vertical" CssClass="text" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="RadioButtonListEnabled_SelectedIndexChanged">
                                             <asp:ListItem Value="Enable" Selected="true">Enable</asp:ListItem>
                                             <asp:ListItem Value="Disable">Disable</asp:ListItem>
                                        </asp:RadioButtonList>
                                   </div>
                                   <div style="padding: 8px;">
                                        <strong>New Lines as:</strong>
                                        <asp:RadioButtonList ID="NewLineBrButtonList" Width="280px" runat="server" AutoPostBack="true"
                                             RepeatDirection="Vertical" CssClass="text" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="NewLineBrButtonList_SelectedIndexChanged">
                                             <asp:ListItem Value="Br">Breaks</asp:ListItem>
                                             <asp:ListItem Value="P" Selected="true">Paragraphs</asp:ListItem>
                                             <asp:ListItem Value="Div">Divs</asp:ListItem>
                                        </asp:RadioButtonList>
                                   </div>
                         <div style="padding: 5px">
                              <strong>Toolbar Mode:</strong>
                              <telerik:RadComboBox AutoPostBack="true" ID="ChooseToolbarMode" runat="server" OnSelectedIndexChanged="ChooseToolbarMode_SelectedIndexChanged"
                                   Width="200">
                                   <Items>
                                        <telerik:RadComboBoxItem runat="server" Selected="True" Text="Default" Value="Default">
                                        </telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="PageTop" Value="PageTop"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="ShowOnFocus" Value="ShowOnFocus"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="Floating" Value="Floating"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="RibbonBar" Value="RibbonBar"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="RibbonBarFloating" Value="RibbonBarFloating">
                                        </telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="RibbonBarPageTop" Value="RibbonBarPageTop">
                                        </telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem runat="server" Text="RibbonBarShowOnFocus" Value="RibbonBarShowOnFocus">
                                        </telerik:RadComboBoxItem>
                                   </Items>
                                   <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
                              </telerik:RadComboBox>
                              <span style="color: red; font-size: 11px; display: block;">* Note that RadRibbonbar
                                   still does not offer MetroTouch Skin</span>
                         </div>
                    </qsf:ConfiguratorPanel>
               </td>
          </tr>
     </table>
     </telerik:RadAjaxPanel>
     <telerik:RadAjaxLoadingPanel runat="server" id="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
     <script type="text/javascript">
          function allowToolbarModeChange(sender, args) {
               if (args.get_eventTarget().indexOf("ChooseToolbarMode") >= 0)
                    args.set_enableAjax(false);
          }
     </script>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Editor.png" AlternateText="tlrk.it/1dSIrex" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1dSIrex">tlrk.it/1dSIrex</a>
    </div>
    </form>
</body>
</html>