Custom Tools

Adding Custom buttons to RadEditor's toolbar

RadEditor provides 4 different ways to add custom buttons to the its toolbar:

1. Setting the tools in the RadEditor's declaration:
    <telerik:radeditor runat="server" ID="RadEditor1">
      <Tools>
       <telerik:EditorToolGroup>
           <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color"/>
           <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date"/>
           <telerik:EditorTool Name="ResetContent" Text="Reset Content"/>
       </telerik:EditorToolGroup>
      </Tools>        
   </telerik:radeditor>
    
   
2. Setting the custom buttons via the ToolsFile property:
   <telerik:radeditor ToolsFile="~/ToolsFile.xml" runat="server" ID="RadEditor2"></telerik:radeditor>
    
   ToolsFile.xml:
   <root>
       <tools name="MainToolbar">
               <tool name="ApplySizeColor" Text="Apply Size and Color"/>
               <tool name="InsertCustomDate" Text="Insert Custom Date"/>
               <tool name="ResetContent" Text="Reset Content"/>
       </tools>
   </root>
    
3. Setting the custom tools programmatically via the codebehind:
   
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           EditorToolGroup main = new EditorToolGroup();
           RadEditor3.Tools.Add(main);
   
           EditorTool applySizeColor = new EditorTool();
           applySizeColor.Name = "ApplySizeColor";
           applySizeColor.Text = "Apply Size and Color";
           main.Tools.Add(applySizeColor);
   
           EditorTool customDate = new EditorTool();
           customDate.Name = "InsertCustomDate";
           customDate.Text = "Insert Custom Date";
           main.Tools.Add(customDate);
   
           EditorTool reset = new EditorTool();
           reset.Text = "Reset Content";
           reset.Name = "ResetContent";
           main.Tools.Add(reset);
       }
   }
   
   
4. Setting the tools by using Theme:
   In your .skin file:
   <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
   <telerik:radeditor runat="server" SkinId="SomeTools">
       <Tools>
          <telerik:EditorToolGroup>
              <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color"/>
              <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date"/>
              <telerik:EditorTool Name="ResetContent" Text="Reset Content"/>
          </telerik:EditorToolGroup>
       </Tools>
   </telerik:radeditor>
    
   Once the skin is set, you need to declare it in the RadEditor's declaration by using the SkinId property:
   <telerik:radeditor
   SkinID="SomeTools"
   Height="100px"
   runat="server" ID="RadEditor4">
   </telerik:radeditor>
   
   Note: More information on how to use ASP.NET 2.x Themes is available in MSDN.

Declaring the custom CommandList that will be executed when the buttons are clicked:

After adding the custom toolbar buttons to the editor's toolbar, you should define their commands. In the page with the editor (after the <telerik:RadEditor ... declaration), add  the following script:

<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["ApplySizeColor"] = function(commandName, editor, args)
{
     editor.fire("FontSize", {value : "4"}); //fire the FontSize command
     editor.fire("ForeColor", {value : "red"});  //fire the ForeColor command
};

Telerik.Web.UI.Editor.CommandList["InsertCustomDate"] = function(commandName, editor, args)
{
   editor.pasteHtml('<span style="width:200px;border: 1px dashed #bb0000;background-color: #fafafa;color: blue;"> ' + new Date() + ' </span>');
};

Telerik.Web.UI.Editor.CommandList["ResetContent"] = function(commandName, editor, args)
{
     editor.set_html(""); //set empty content
};
</script>

If a custom tool is added without a CommandList command, then the clicked button will pop up a message that the command [commandname] is not implemented yet.

Set icons for the custom buttons

To improve the appearance of the custom buttons provide image files for them and declare or import with a <link> tag the following CSS classes in the page with the editor:

<style type="text/css">
.reTool .InsertCustomDate
{
   background-image: url(InsertDate.gif);
}
.reTool  .ApplySizeColor
{
   background-image: url(Custom.gif);
}
.reTool  .ResetContent
{
   background-image: url(Cancel.gif);
}
</style>

The syntax to follow is:

<style type="text/css">
.reTool .<commandName>
{
  background-image: url(MyImage.gif) !important;
}
</style>

Related Resources

• Adding Your Own Buttons