Add Your Own Buttons
RadEditor provides 4 different ways to configure the toolbars:
Setting the tools in the RadEditor's declaration:
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Custom1" />
<telerik:EditorTool Name="Custom2" />
<telerik:EditorTool Name="Custom3" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>The selected ToolsFile or the built-in default tools file will not be loaded if you set the Tools collection in the control tag.
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
<telerik:RadEditor RenderMode="Lightweight" ToolsFile="~/ToolsFile.xml" runat="server" ID="RadEditor2" Height="100px">
</telerik:RadEditor><tools name="MainToolbar" enabled="true">
<tool name="Custom1" />
<tool name="Custom2" />
<tool name="Custom3" />
</tools>Setting the tools programmatically in the code-behind:
Creating tools programmatically will replace the default toolsfile RadEditor loads and only the tools you added will remain. If you want to keep the original set of tools and add your own after them, call the EnsureToolsFileLoaded method first.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//uncomment this line to first load the default tools
//RadEditor3.EnsureToolsFileLoaded();
EditorToolGroup main = new EditorToolGroup();
RadEditor3.Tools.Add(main);
EditorTool custom1 = new EditorTool();
custom1.Name = "Custom1";
custom1.ShortCut = "CTRL+1";
main.Tools.Add(custom1);
EditorTool custom2 = new EditorTool();
custom2.Name = "Custom2";
custom2.ShortCut = "CTRL+2";
main.Tools.Add(custom2);
EditorTool custom3 = new EditorTool();
custom3.Name = "Custom3";
custom3.ShortCut = "CTRL+3";
main.Tools.Add(custom3);
}
}Setting the tools by using Theme:
In your .skin file:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadEditor RenderMode="Lightweight" 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:
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.Default.DefaultCS" %>
...
<telerik:RadEditor RenderMode="Lightweight" SkinID="SomeTools" 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 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:
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 or font icons, based on the render mode of the editor. You can find such an example in the (Set Icons for Toolbar Button States) help article.