1. Setting custom split buttons inline in the RadEditor's declaration and via the ToolsFile
RadEditor - please enable JavaScript to use the rich text editor.
2. Setting custom dropdowns via the ToolsFile.xml file
3. Setting a custom dropdown tool programmatically via the codebehind
Adding Custom SplitButtons to RadEditor's toolbar
Follow the steps below to create a custom SplitButton:
Adding Custom dropdowns to RadEditor's toolbar
C#: //add a new Toolbar dynamically EditorToolGroup dynamicToolbar = new EditorToolGroup(); RadEditor1.Tools.Add(dynamicToolbar); //add a custom dropdown and set its items and dimension attributes EditorDropDown ddn = new EditorDropDown("DynamicDropdown"); ddn.Text = "Dynamic dropdown"; //Set the popup width and height ddn.Attributes["width"] = "110px"; ddn.Attributes["popupwidth"] = "240px"; ddn.Attributes["popupheight"] = "100px"; //Add items ddn.Items.Add("Daily signature", "TTYL,<br/>Tom"); ddn.Items.Add("Informal Signature", "Greetings,<br/>Tom"); ddn.Items.Add("Official Signature", "Yours truly,<br/>Tom Jones"); //Add tool to toolbar dynamicToolbar.Tools.Add(ddn);
VB.NET 'add a new Toolbar dynamically Dim dynamicToolbar As New EditorToolGroup() RadEditor1.Tools.Add(dynamicToolbar) 'add a custom dropdown and set its items and dimension attributes Dim ddn As New EditorDropDown("DynamicDropdown") ddn.Text = "Dynamic dropdown" 'Set the popup width and height ddn.Attributes("width") = "110px" ddn.Attributes("popupwidth") = "240px" ddn.Attributes("popupheight") = "100px" 'Add items ddn.Items.Add("Daily signature", "TTYL,<br/>Tom") ddn.Items.Add("Informal Signature", "Greetings,<br/>Tom") ddn.Items.Add("Official Signature", "Yours truly,<br/>Tom Jones") 'Add tool to toolbar dynamicToolbar.Tools.Add(ddn)
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.CustomDropdowns.DefaultCS" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %><%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %><%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %><%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <qsf:HeadTag ID="Headtag1" runat="server" /> <style type="text/css"> .reTool .Emoticons, .reTool .Emoticons2 { background-image: url(icons/1.gif); } .reTool .DynamicSplitButton { background-image: url(icons/InsertSnippet.gif); } </style></head><body class="BODY"> <form id="form1" runat="server"> <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" /> <telerik:RadScriptManager ID="ScriptManager1" runat="server" /> <p style="clear: both; float: none; font-weight: bold; margin-top: 25px; margin-bottom: 10px;"> 1. Setting custom split buttons inline in the RadEditor's declaration and via the ToolsFile </p> <telerik:RadEditor runat="server" ID="RadEditor1" Height="200px" ToolsFile="~/Editor/Examples/CustomDropdowns/EmoticonsToolsFile.xml" OnClientCommandExecuting="OnClientCommandExecuting"> <Tools> <telerik:EditorToolGroup> <telerik:EditorSplitButton Name="Emoticons2" Text="Emoticons set inline" ItemsPerRow="5" PopupWidth="170px" PopupHeight="117px"> <telerik:EditorDropDownItem Name="<img src='icons/1.gif' />" Value="icons/1.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/2.gif' />" Value="icons/2.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/3.gif' />" Value="icons/3.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/4.gif' />" Value="icons/4.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/5.gif' />" Value="icons/5.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/6.gif' />" Value="icons/6.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/7.gif' />" Value="icons/7.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/8.gif' />" Value="icons/8.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/9.gif' />" Value="icons/9.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/10.gif' />" Value="icons/10.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/11.gif' />" Value="icons/11.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/12.gif' />" Value="icons/12.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/13.gif' />" Value="icons/13.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/14.gif' />" Value="icons/14.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/15.gif' />" Value="icons/15.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/16.gif' />" Value="icons/16.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/17.gif' />" Value="icons/17.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/18.gif' />" Value="icons/18.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/19.gif' />" Value="icons/19.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/20.gif' />" Value="icons/20.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/21.gif' />" Value="icons/21.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/22.gif' />" Value="icons/22.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/23.gif' />" Value="icons/23.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/24.gif' />" Value="icons/24.gif" /> <telerik:EditorDropDownItem Name="<img src='icons/25.gif' />" Value="icons/25.gif" /> </telerik:EditorSplitButton> </telerik:EditorToolGroup> </Tools> <Content> <img alt="product logo" src="../../Img/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> <p style="clear: both; float: none; font-weight: bold; margin-top: 25px; margin-bottom: 10px;"> 2. Setting custom dropdowns via the ToolsFile.xml file</p> <telerik:RadEditor OnClientCommandExecuting="OnClientCommandExecuting" ToolsFile="~/Editor/Examples/CustomDropdowns/ToolsFile.xml" runat="server" ID="RadEditor2" Height="200px"> <Content> <table> <tbody> <tr> <td> <strong>Unordered Lists</strong></td> <td> <strong>Ordered Lists</strong></td> </tr> <tr> <td> Among the hottest features of RadEditor 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>Simplified and intuitive toolbar configuration</em> </li> <li><em>Out-of-the-box XHTML-enabled output</em> </li> </ul> </td> <td>RadEditor offers 7 different ways to paste content from Microsoft Word and other applications: <ol> <li>Strip Word-formatting on paste</li> <li>Strip Word-formatting on paste (cleaning fonts and sizes)</li> <li>Forced format stripping on Paste</li> <li>Word Content in Clipboard Interception</li> <li>Strip Word-formatting after paste</li> <li>Paste plain text</li> <li>Paste as HTML </li> </ol> </td> </tr> </tbody> </table> </Content> </telerik:RadEditor> <p style="clear: both; float: none; font-weight: bold; margin-top: 25px; margin-bottom: 10px;"> 3. Setting a custom dropdown tool programmatically via the codebehind</p> <telerik:RadEditor runat="server" ID="RadEditor3" Height="200px" OnClientCommandExecuting="OnClientCommandExecuting"> <Content> <img alt="product logo" src="../../Img/productLogoLight.gif" /> is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and powerful new capabilities of the RadControls for ASP.NET AJAX suite features the new WYSIWYG Editor as a flexible and lightweight component, turning to be 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> <script type="text/javascript"> //<![CDATA[ function OnClientCommandExecuting(editor, args) { var name = args.get_name(); //The command name var val = args.get_value(); //The tool that initiated the command if (name == "Emoticons" || name == "Emoticons2") { //Set the background image to the head of the tool depending on the selected toolstrip item var tool = args.get_tool(); var span = tool.get_element().getElementsByTagName("SPAN")[0]; span.style.backgroundImage = "url(" + val + ")"; //Paste the selected in the dropdown emoticon editor.pasteHtml("<img src='" + val + "'>"); //Cancel the further execution of the command args.set_cancel(true); } var elem = editor.getSelectedElement(); //Get a reference to the selected element if (name == "OrderedListType" || name == "UnorderedListType") { if (elem.tagName != "OL" && elem.tagName != "UL") { while (elem != null) { if (elem && elem.tagName == "OL" || elem.tagName == "UL") break; elem = elem.parentNode; } if (elem) elem.style.listStyleType = val; //apply the selected item shape else alert ("No ordered list selected! Please select a list to modify"); } args.set_cancel(true); } if (name == "DynamicDropdown" || name == "DynamicSplitButton") { editor.pasteHtml("<div style='width:100px;background-color:#fafafa;border:1px dashed #aaaaaa;'>" + val + "</div>"); //Cancel the further execution of the command args.set_cancel(true); } } //]]> </script> <qsf:Footer runat="server" ID="Footer1" /> </form></body></html>
Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.
Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.
If you have any questions, do not hesitate to contact us at sales@telerik.com.