Editor - Custom Tools

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.CustomButtons.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="800px" OnClientLoad="TelerikDemo.editor_onClientLoad">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date"></telerik:EditorTool>
                    <telerik:EditorTool Name="ResetContent" Text="Reset Content"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <Content>
                <img alt="product logo" src="../../images/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>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?