Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Custom Dropdowns

1. Setting custom split buttons inline in the RadEditor's declaration and via the ToolsFile

   
 
 
 
 
   

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:

    1. To register a custom splitbutton inline in RadEditor declaration add a <telerik:EditorToolGroup> tag to the <Tools> inner-tag of the control:

      <telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
         
      <Tools>
             
      <telerik:EditorToolGroup>    
                 
      <telerik:EditorSplitButton Name="Emoticons" 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:EditorSplitButton>
             
      </telerik:EditorToolGroup>
         
      </Tools>  
      </telerik:radeditor>

      To populate the items of the splitbutton, add the desired count of <telerik:EditorDropDownItem> tags to the <telerik:EditorSplitButton/> inner-tag . The Name attribute of the <telerik:EditorDropDownItem> tag represents the item name that will be rendered in the dropdown and the Value represents the value of the selected item.
       
    2. The define the splitbutton via the ToolsFile.xml use the following syntax:

      <tool name="Emoticons" Name="Emoticons"  type="SplitButton" ItemsPerRow="5" PopupWidth="170px" PopupHeight="117px">
         
      <item  name="<img src='icons/1.gif' />"  value="icons/1.gif"  />
         <
      item  name="<img src='icons/2.gif' />"  value="icons/2.gif"  />
         <
      item  name="<img src='icons/3.gif' />"  value="icons/3.gif"  />
         ...
      </
      tool>

      Note that the type of the custom tool should be SplitButton.
       
    3. To create a splitbutton via the codebehind use the following code [C# example]:

      using Telerik.Web.UI;
      ...
      //add a new Toolbar dynamically
      EditorToolGroup dynamicToolbar = new EditorToolGroup();
      RadEditor1.Tools.Add(dynamicToolbar);

      //add a new ToolStrip dynamically

      EditorSplitButton sp1 = new EditorSplitButton("DynamicSplitButton");
      sp1.Text = "Emoticons";
      sp1.Items.Add("<img src='icons/1.gif'>", "icons/1.gif");
      sp1.Items.Add("<img src='icons/2.gif'>", "icons/2.gif");
      sp1.Items.Add("<img src='icons/3.gif'>", "icons/3.gif");

      dynamicToolbar.Tools.Add(sp1);
       
    4. After adding the custom splitbutton to the editor's toolbar, you should attach a function to the editor's OnClientCommandExecuting event property, the arguments of which will give you reference to the selected dropdown item and its value. To paste the returned value from the selected item in the content area use the pasteHtml(value) function, e.g.

      <script type="text/javascript">
      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")
          {                                                                                
             
      //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)
         
      }
      }
      </script>

       
    5. To set a default splitbutton icon, provide an image file and declare the following CSS class in the page with the editor:

      <style type="text/css">                        
          span
      .ToolStripName
         
      {
              background-image
      :url(<iconUrl>);                                                                 
         
      }    
          span
      .Emoticons
         
      {
              background-image
      :url(icons/1.gif);                                                                 
         
      }
      <
      /style>

    Adding Custom dropdowns to RadEditor's toolbar

    Follow the steps below to create a custom dropdown:
    1. Register the dropdown by adding the telerik:EditorDropDown tag to Tools inner tag of the RadEditor declaration:

      <telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">   
         
      <Tools>
             
      <telerik:EditorToolGroup>                
                 
      <telerik:EditorDropDown Name="Emoticons" Text="Emoticons" ItemsPerRow="3" PopupWidth="90" PopupHeight="90">
                       
      <telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil1.gif' />" value="./Emoticons/smil1.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil2.gif' />" value="./Emoticons/smil2.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil3.gif' />" value="./Emoticons/smil3.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil4.gif' />" value="./Emoticons/smil4.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil8.gif' />" value="./Emoticons/smil8.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil6.gif' />" value="./Emoticons/smil6.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil7.gif' />" value="./Emoticons/smil7.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil9.gif' />" value="./Emoticons/smil9.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='./Emoticons/smil11.gif' />" value="./Emoticons/smil11.gif" />                    
                  </
      telerik:EditorDropDown>
             
      </telerik:EditorToolGroup>
         
      </Tools>
      </telerik:radeditor>

      To populate the items of the dropdown use the telerik:EditorDropDownItem inner tag of telerik:EditorDropDown. The Name attribute of the telerik:EditorDropDownItem tag represents the item name that will be rendered in the dropdown and the Value represents the value of the selected item.
       
    2. To create a custom dropdown via the ToolsFile.xml file use the following syntax:
       
      <tool name="Emoticons" Name="Emoticons"  type="dropdown" PopupWidth="170px" PopupHeight="117px">
       
      <item  name="<img src='icons/1.gif' />"  value="icons/1.gif"  />
        <
      item  name="<img src='icons/2.gif' />"  value="icons/2.gif"  />
        <
      item  name="<img src='icons/3.gif' />"  value="icons/3.gif"  />
        ...
      </
      tool>

      Note that the type of the custom tool should be dropdown.
    3. To create and configure a custom dropdown dynamically on the server use the code below:

      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)

    4. After adding the custom dropdown to the editor's toolbar, you should attach a function to the editor's OnClientCommandExecuting, the arguments of which will give you reference to the selected dropdown name and value.  Once you obtain the selected item's value, you can modify it and paste it through the pasteHtml function in the content area, e.g.

      <telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">   
         
      <Tools>
             
      <telerik:EditorToolGroup>                
                 
      <telerik:EditorDropDown Name="Emoticons" Text="Emoticons" ItemsPerRow="3" PopupWidth="90" PopupHeight="90">
                       
      <telerik:EditorDropDownItem  Name ="<img src='Icons/smil1.gif' />" value="Icons/smil1.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='Icons/smil2.gif' />" value="Icons/smil2.gif" />
                       <
      telerik:EditorDropDownItem  Name ="<img src='Icons/smil3.gif' />" value="Icons/smil3.gif" />
                         
      </telerik:EditorDropDown>
             
      </telerik:EditorToolGroup>
         
      </Tools>
      </telerik:radeditor>
      <script type="text/javascript">
      function OnClientCommandExecuting(editor, args)
      {
         
      var name = args.get_name();
          var
      val = args.get_value();
          if
      (name == "Emoticons")
          {
              editor.pasteHtml(
      "<img src='" + val + "'>");        
             
      //Cancel the further execution of the command as such a command does not exist in the editor command list
             
      args.set_cancel(true)
         
      }
          
         
      if (name == "DynamicDropdown")
          {
              editor.pasteHtml(
      "<div style='width:100px;background-color:#fafafa;border:1px dashed #aaaaaa;'>" + val + "</div>");       
             
      //Cancel the further execution of the command as such a command does not exist in the editor command list
             
      args.set_cancel(true)
         
      }
      }
      </script>

     

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Editor.CustomDropdowns.DefaultVB" %>

    <%@ 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="VB" />
        <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>

Get more than expected!

 
 

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.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451