RadEditor for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

RadEditor "Prometheus" provides 4 different ways to configurate the toolbars:

Setting the tools in the RadEditor's declaration:

CopyASPX
<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Custom1" />
            <telerik:EditorTool Name="Custom2" />
            <telerik:EditorTool Name="Custom3" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

Setting the tools via the ToolsFile property - the same way as in the previous versions of the control:

You can add any number of custom buttons using the sample code below. All you need to do is provide different names for them, e.g. in your

CopyASPX
<telerik:RadEditor ToolsFile="~/ToolsFile.xml" runat="server" ID="RadEditor2" Height="100px">
</telerik:RadEditor>
CopyXML
<tools name="MainToolbar" dockable="true" enabled="true">  
    <tool name="Custom1" />  
    <tool name="Custom2" />  
    <tool name="Custom3" />
</tools>

Setting the tools programmatically in the codebehind:

Setting the tools by using Theme:

In your .skin file:

CopyASPX
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadEditor runat="server" SkinID="SomeTools">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Custom1" />
            <telerik:EditorTool Name="Custom2" />
            <telerik:EditorTool Name="Custom3" />
        </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. In the Default.aspx:

CopyASPX
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.Default.DefaultCS" %>
...
<telerik:RadEditor SkinID="SomeTools" runat="server" ID="RadEditor4">
</telerik:RadEditor>
Note

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 button is clicked:

After adding the custom toolbar button(s) to the editor's toolbar, you should define their command. In your page with the editor (after the <telerik:radeditor ... declaration), add the following:

CopyJavaScript
Telerik.Web.UI.Editor.CommandList["Custom1"] = function (commandName, editor, args)
{
    alert("Custom command 1");
    //for example you can apply bold formatting by firing the editor.fire("Bold");
};
Telerik.Web.UI.Editor.CommandList["Custom2"] = function (commandName, editor, args)
{
    alert("Custom command 2");
    // Execute your code here, provide it with any arguments that you need, etc.
};
Telerik.Web.UI.Editor.CommandList["Custom3"] = function (commandName, editor, args)
{   
    // Execute your code here, provide it with any arguments that you need, etc.
};

If you add a custom tool and do not create a CommandList then when you click the button it will pop up a message that the command <commandName> is not implemented yet.

The commands above will be rendered as buttons on the toolbar. To improve their appearance, you should provide image files for them and declare the following CSS classes in the page with the editor inside the HEAD tags or in external css file that you should import in the page with the editor with a LINK tag:

CopyXML
<style type="text/css">
    .reTool .<commandName>
    {   
        background-image: url(MyImage.gif);
    }
    .reTool .Custom1
    {   
        background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
    }
    .reTool .Custom2  
    {
        background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/Custom.gif);
    }
    .reTool .Custom3
    {   
        background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
    }
</style>

See Also