Editor / Custom Dropdowns

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

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>