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

Server-side API

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