All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The RadEditor Toolbar position can be changed by using the DockingZone attribute which can have the following values:
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"
>
</
You can obtain the skin name dynamically from the RadEditor object through its get_skin() JavaScript method, as shown in this demo.
get_skin()
Here are a few examples of setting a custom toolbar position:
telerik:RadEditor
ID
"RadEditor1"
runat
"server"
Tools
telerik:EditorToolGroup
DockingZone
"Left"
telerik:EditorTool
Name
"AjaxSpellCheck"
/>
. . . .
tools
enabled
"true"
"Bottom"
tool
name
"Bold"
EditorToolGroup toolgroupLeft = newEditorToolGroup();
toolgroupLeft.Attributes[
"DockingZone"
] =
;
editor.Tools.Add(toolgroupLeft);
toolgroupLeft.Tools.Add(newEditorTool(
));
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.DockingZone.DefaultVB" %> <%@ 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: <div id="outerdiv"></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>