Editor

Controls

Rate this demo

Thank you for your post!

RadEditor - Telerik's ASP.NET Editor

   
  
 
 
   
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

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 70+ other controls are part of RadControls 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 the business logic of the app.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the RadControls) to quickly create, upgrade and configure your RadControls 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 RadControls, 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">
          .reToolbarWindow {
               z-index: 20002 !important;
          }
          .qsf-demo-container {
                max-width: 100% !important;
          }
          .RadEditor.MetroTouch,
          .RadEditor.BlackMetroTouch {
               width: 1100px !important;
          }
          .RadEditor.Silk,
          .RadEditor.Glow {
               width: 850px !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" />
     <table cellspacing="0" cellpadding="0">
          <tr>
               <td style="vertical-align: top;">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                         <ContentTemplate>
                              <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="675px" Width="755">
                                   <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>
                         </ContentTemplate>
                         <Triggers>
                              <asp:AsyncPostBackTrigger ControlID="CheckBoxListEditMode"></asp:AsyncPostBackTrigger>
                              <asp:AsyncPostBackTrigger ControlID="RadioButtonListEditMode"></asp:AsyncPostBackTrigger>
                              <asp:AsyncPostBackTrigger ControlID="CheckBoxListModules"></asp:AsyncPostBackTrigger>
                              <asp:AsyncPostBackTrigger ControlID="RadioButtonListEnabled"></asp:AsyncPostBackTrigger>
                              <%--<asp:AsyncPostBackTrigger ControlID="ChooseToolbarMode" />--%>
                         </Triggers>
                    </asp:UpdatePanel>
               </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">
                         <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                              <ContentTemplate>
                                   <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" Selected="true">Breaks</asp:ListItem>
                                             <asp:ListItem Value="P">Paragraphs</asp:ListItem>
                                             <asp:ListItem Value="Div">Divs</asp:ListItem>
                                        </asp:RadioButtonList>
                                   </div>
                              </ContentTemplate>
                         </asp:UpdatePanel>
                         <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>
    </form>
</body>
</html>