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
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.
RadEditor's server-side API provides intuitive collections and methods for managing the various sets of colors, fonts, paragraphs, symbols, links, and toolbars:
You can find a full list of the available methods, properties and collections in the RadEditor Server-side API article.
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.ServersideAPI.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" /> </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>