RadEditor for ASP.NET
Contents
Adding Custom Dropdown Send comments on this topic.
See Also
DropDowns > Adding Custom Dropdown

Glossary Item Box

Tools functionality is implemented exclusively on the client (using JavaScript).

To add custom dropdown to Telerik RadEditor follow these steps: 

  1. Define the custom tool in the ToolsFile.xml file:

    ToolsFile.xml Copy Code
    <!-- To create a tool that will render as a dropdown on the client,
    specify type="dropdown" and add some items with name-value pairs -->

    <tool name="MyDropDown" type="dropdown">
          <item name="Item 1" value="1"></item>
          <item name="Item 2" value="2"></item>
          <item name="Item 3" value="3"></item>
          <item name="Item 4" value="4"></item>
          <item name="Item 5" value="5"></item>
    </    tool>

    or programmatically in the codebehind:

    C# Copy Code
    using Telerik.WebControls.RadEditorUtils;
    ...
    // Add custom dropdown with 5 items to the first toolbar of Telerik RadEditor
    ToolbarDropDown dropDown = new ToolbarDropDown("MyDropDown");
    for (int i = 0; i < 5; i++)
    {
       dropDown.Items.Add(    new Telerik.WebControls.RadEditorUtils.ListItem((i + 1).ToString("Item #"), (i + 1).ToString()));
    }
    RadEditor1.Toolbars    [0].Tools.Add(dropDown);
    VB.NET Copy Code
    Imports Telerik.WebControls.RadEditorUtils
    ...
    'Add custom dropdown with 5 items to the first toolbar of Telerik RadEditor
    Dim dropDown = New ToolbarDropDown("MyDropDown")
    Dim i As Integer
    For i = 0 To 4
         dropDown.Items.Add(New Telerik.WebControls.RadEditorUtils.ListItem((i + 1).ToString("Item #"), (i + 1).ToString()))
    Next i
    RadEditor1.Toolbars(0).Tools.Add(dropDown)

  2. If you need to localize the tool’s name, then add a new localization entry to the RadControls/Editor/Localization/<Used Localization>/Main.xml
    The id of the localization string must match the tool’s name:


     

  3. Implement the tool – that is – write some javascript for the tool and hook it to the editor’s command list. When the user clicks the custom tool or selects an item from the custom dropdown your custom handler function will be automatically called.


    Note that the custom commands should be placed under the editor's declaration.

  4. Create custom button icons. There are two ways to specify an icon for your custom tool. The possibilities are:

  5. Add your icon (.gif)  to the \RadControls\Editor\Skins\<Used Skin>\Buttons folder with the same name as the custom tool.

  6. Set the IconUrl property of the custom tool tag to point to some image:

    ToolsFile.xml Copy Code
    <tool name="MyCustomTool" iconUrl="./Images/MyCustomTool.gif" />

    7.  

    See Also

    Example in QSF
    Adding Custom Tools

    Getting Started
    Using the ToolsFile.xml