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

Docking Zones

This toolbar is docked to a generic HTML element: <div id="outerdiv">

  • 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

Load tools by using



The RadEditor Toolbar position can be changed by using the DockingZone attribute which can have the following values:

  • Left
  • Right
  • Top
  • Bottom
  • Module
  • The id of an external html element

If an external element is used, it must have the following CSS classes applied: RadEditor, reCustomContainer, <RadEditor Skin>. Here is an example with the Default skin:

<div id="outerdiv" class="RadEditor reCustomContainer Default">
</div>

You can obtain the skin name dynamically from the RadEditor object through its  get_skin() JavaScript method, as shown in this demo. 

Here are a few examples of setting a custom toolbar position:

  • In the RadEditor declaration:

    <telerik:RadEditor ID="RadEditor1" runat="server">
        <Tools>
            <telerik:EditorToolGroup DockingZone="Left">
                <telerik:EditorTool Name="AjaxSpellCheck" />
                . . . .
            </telerik:EditorToolGroup>
        </Tools>
    </telerik:RadEditor>
  • In the ToolsFile:
    <tools enabled="true" DockingZone="Bottom">
        <tool name="Bold" />
        . . . .
    </tools>
  • In the code behind:
    EditorToolGroup toolgroupLeft = newEditorToolGroup();
    toolgroupLeft.Attributes["DockingZone"] = "Left";
    editor.Tools.Add(toolgroupLeft);
    toolgroupLeft.Tools.Add(newEditorTool("Bold"));
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • SomeTools.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.DockingZone.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" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</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">
            <h2>This toolbar is docked to a generic HTML element: &lt;div id="outerdiv"&gt;</h2>
            <asp:Panel runat="server" ID="ToolbarHolder">
                <div id="outerdiv" class="RadEditor reCustomContainer">
                </div>
            </asp:Panel>
        </div>

        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" OnClientLoad="telerikDemo.EditorOnClientLoad" SkinID="DefaultSetOfTools"
                EnableViewState="false" Height="400px">
                <Tools>
                    <telerik:EditorToolGroup dockingzone="Left">
                        <telerik:EditorTool Name="AjaxSpellCheck"></telerik:EditorTool>
                        <telerik:EditorTool Name="InsertTable"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+M"></telerik:EditorTool>
                        <telerik:EditorTool Name="ImageMapDialog"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="FlashManager"></telerik:EditorTool>
                        <telerik:EditorTool Name="MediaManager"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                        <telerik:EditorTool Name="TemplateManager"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup dockingzone="Top">
                        <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                        <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                        <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                        <telerik:EditorTool Name="StrikeThrough"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="JustifyLeft"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyCenter"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyRight"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyFull"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyNone"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="Superscript"></telerik:EditorTool>
                        <telerik:EditorTool Name="Subscript"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="ConvertToLower"></telerik:EditorTool>
                        <telerik:EditorTool Name="ConvertToUpper"></telerik:EditorTool>
                        <telerik:EditorTool Name="Indent"></telerik:EditorTool>
                        <telerik:EditorTool Name="Outdent"></telerik:EditorTool>
                        <telerik:EditorTool Name="InsertOrderedList"></telerik:EditorTool>
                        <telerik:EditorTool Name="InsertUnorderedList"></telerik:EditorTool>
                        <telerik:EditorTool Name="AbsolutePosition"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup dockingzone="Right">
                        <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                        <telerik:EditorTool Name="Unlink"></telerik:EditorTool>
                        <telerik:EditorTool Name="ToggleTableBorder"></telerik:EditorTool>
                        <telerik:EditorTool Name="ToggleScreenMode"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                        <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup dockingzone="Bottom">
                        <telerik:EditorTool Name="Undo"></telerik:EditorTool>
                        <telerik:EditorTool Name="Redo"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                        <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+!"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup dockingzone="outerdiv">
                        <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                        <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                        <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                        <telerik:EditorTool Name="StrikeThrough"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="JustifyLeft"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyCenter"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyRight"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyFull"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyNone"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="Superscript"></telerik:EditorTool>
                        <telerik:EditorTool Name="Subscript"></telerik:EditorTool>
                        <telerik:EditorSeparator Visible="true"></telerik:EditorSeparator>
                        <telerik:EditorTool Name="ConvertToLower"></telerik:EditorTool>
                        <telerik:EditorTool Name="ConvertToUpper"></telerik:EditorTool>
                        <telerik:EditorTool Name="Indent"></telerik:EditorTool>
                        <telerik:EditorTool Name="Outdent"></telerik:EditorTool>
                        <telerik:EditorTool Name="InsertOrderedList"></telerik:EditorTool>
                        <telerik:EditorTool Name="InsertUnorderedList"></telerik:EditorTool>
                        <telerik:EditorTool Name="AbsolutePosition"></telerik:EditorTool>
                        <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                        <telerik:EditorTool Name="Unlink"></telerik:EditorTool>
                        <telerik:EditorTool Name="ToggleTableBorder"></telerik:EditorTool>
                        <telerik:EditorTool Name="ToggleScreenMode"></telerik:EditorTool>
                    </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>
    </div>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListToolsLoad">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListToolsLoad" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ToolbarHolder"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="RadioButtonListToolsLoad" Orientation="Horizontal" Label="Load tools by using"
                    OnSelectedIndexChanged="RadioButtonListToolsLoad_SelectedIndexChanged"
                    runat="server" AutoPostBack="True">
                    <asp:ListItem Value="InlineDeclaration" Selected="True" Enabled="true">InlineDeclaration</asp:ListItem>
                    <asp:ListItem Value="ToolsFile">ToolsFile</asp:ListItem>
                    <asp:ListItem Value="DynamicallyAdd">DynamicallyAdd</asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance