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

    Server-side API

    • Demo Configurator
    • Toolbar
    • Tools
    • Color Collection
    • Format Block Tool
    Add Empty Toolbar
    Remove Last Toolbar
    Tool List
    AboutDialog
    Toolgroup Index
    0
    Add New Tool
    Color
    #000000
    Add New Color
    Paragraph Items
    H1
    Add Paragraph

    In this demo you can examine how using the server-side API of the RadEditor control you can modify the tools in the toolbar and manage the built-in collections.

    Toolbar

    1. Add Empty Toolbar - adds an additional empty toolbar/toolgroup.
    2. Remove Last Toolbar - removes the last toolbar/toolgroup of the editor.

    Tools

    1. Tool List - you can select a built-in tool from this dropdown.
    2. Toolgroup Index - selects the toolgruop in which the selected tool to be added.
    3. Add New Tool - adds the selected tool in the selected toolgroup.

    Color Collection

    1. Color - dropdown with predefined list of colors' HEX codes.
    2. Add New Color - adds the new color to the Color Collection. You can examine the new colors via the ForeColor or BackColor tools.

    Format Block Tool

    1. Paragraph Items - list of predefined Paragraph items.
    2. Add Paragraph - adds the selected paragraph item to the Format Block tool's dropdown.

    Server-Side API

    RadEditor's server-side API provides intuitive collections and methods for managing the various sets of colors, fonts, paragraphs, symbols, links, and toolbars:

    • RadEditor.FontNames - collection of the available fonts
    • RadEditor.FontSizes - collection of the available font sizes
    • RadEditor.Colors - collection of the available colors
    • RadEditor.Symbols - collection of the available symbols
    • RadEditor.Paragraphs - collection of the available block formatting paragraphs
    • RadEditor.Snippets - collection of the available HTML snippets
    • RadEditor.CssClasses - collection of the available CSS classes
    • RadEditor.Tools - collection of the available toolbars
    • RadEditor.Modules - collection of the available system modules
    • RadEditor.Links - collection of the available custom links

    You can find a full list of the available methods, properties and collections in the RadEditor Server-side API article.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ServersideAPI.DefaultCS"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ 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" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-wide">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" Width="800px" Height="270px">
                <Tools>
                    <telerik:EditorToolGroup Tag="MainToolbar">
                        <telerik:EditorTool Name="AjaxSpellCheck" />
                        <telerik:EditorTool Name="FindAndReplace" />
                        <telerik:EditorSeparator Visible="true" />
                        <telerik:EditorTool Name="Undo" />
                        <telerik:EditorTool Name="Redo" />
                        <telerik:EditorSeparator Visible="true" />
                        <telerik:EditorTool Name="Cut" />
                        <telerik:EditorTool Name="Copy" />
                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+!" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup Tag="Formatting">
                        <telerik:EditorTool Name="Bold" />
                        <telerik:EditorTool Name="Italic" />
                        <telerik:EditorTool Name="Underline" />
                        <telerik:EditorSeparator Visible="true" />
                        <telerik:EditorTool Name="ForeColor" />
                        <telerik:EditorTool Name="BackColor" />
                        <telerik:EditorSeparator Visible="true" />
                        <telerik:EditorTool Name="FontName" />
                        <telerik:EditorTool Name="RealFontSize" />
                        <telerik:EditorTool Name="FormatBlock" />
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                        <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
                        <ul>
                            <li><em>Single-file, drag-and-drop deployment</em></li>
                            <li><em>Built on top of ASP.NET AJAX</em></li>
                            <li><em>Unmatched loading speed with new semantic rendering </em></li>
                            <li><em>Full keyboard accessibility</em></li>
                            <li><em>Flexible Skinning mechanism</em></li>
                            <li><em>Simplified and intuitive toolbar configuration</em></li>
                            <li><em>Out-of-the-box XHTML-enabled output</em></li>
                        </ul>
                </Content>
            </telerik:RadEditor>
        </div>
     
        <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>
     
        <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
            <Views>
                <qsf:View runat="server" Title="Toolbar">
                    <qsf:ConfiguratorColumn runat="server" Title="Add Empty Toolbar" Size="Narrow">
                        <qsf:Button ID="btnAddNewToolBar" runat="server" Text="Add" OnClick="btnAddNewToolBar_Click"
                            UseSubmitBehavior="false" Size="Medium">
                        </qsf:Button>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Remove Last Toolbar" Size="Narrow">
                        <qsf:Button ID="btnRemoveLastTool" runat="server" Text="Remove" OnClick="btnRemoveLastTool_Click"
                            UseSubmitBehavior="false" Size="Medium">
                        </qsf:Button>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View runat="server" Title="Tools">
                    <qsf:ConfiguratorColumn runat="server" Title="Tool List" Size="Narrow">
                        <qsf:DropDownList ID="ddTools" runat="server" Size="Wide" DropDownHeight="300px">
                        </qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Toolgroup Index" Size="Narrow">
                        <qsf:DropDownList ID="ddToolBars" runat="server" Size="Medium">
                        </qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Add New Tool" Size="Narrow">
                        <qsf:Button ID="btnAddNewTool" runat="server" Text="Add" OnClick="btnAddNewTool_Click"
                            UseSubmitBehavior="false" Size="Medium">
                        </qsf:Button>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View runat="server" Title="Color Collection">
                    <qsf:ConfiguratorColumn runat="server" Title="Color" Size="Narrow">
                        <qsf:DropDownList ID="ddColors1" runat="server" Size="Medium">
                            <Items>
                                <telerik:DropDownListItem Text="#000000" Value="#000000"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="#0066EE" Value="#0066EE"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="#FFFFFF" Value="#FFFFFF"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Add New Color" Size="Narrow">
                        <qsf:Button ID="btnAddNewColor" runat="server" Text="Add" OnClick="btnAddNewColor_Click"
                            UseSubmitBehavior="false" Size="Medium">
                        </qsf:Button>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View runat="server" Title="Format Block Tool">
                    <qsf:ConfiguratorColumn runat="server" Title="Paragraph Items" Size="Narrow">
                        <qsf:DropDownList ID="ddParagraphs" runat="server" Size="Medium">
                            <Items>
                                <telerik:DropDownListItem Text="H1" Value="H1"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="H2" Value="H2"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="H3" Value="H3"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="H4" Value="H4"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Add Paragraph" Size="Narrow">
                        <qsf:Button ID="btnParagraphs" runat="server" Text="Add" OnClick="btnParagraphs_Click"
                            UseSubmitBehavior="false" Size="Medium"></qsf:Button>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance