New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add Custom Buttons

Bellow are the exact steps that demonstrate how to add your custom button when using RadEditor for SP2010:

  1. Open the respective ToolsFile situated in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/6.x.x.0__1f131a624888eeed/Resources folder and add the custom button's declaration e.g. <tool name="CustomCommand1" />

  2. Next, open the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/6.x.x.0__1f131a624888eeed/Resources/SPEditorTools.js and add the custom tool's command:


    Telerik.Web.UI.Editor.CommandList["CustomCommand1"] = function (commandName, editor, args)
        alert("Custom command 1");
        //for example you can apply bold formatting by firing the"Bold");
  3. The command above will be rendered as button on the toolbar. To improve the appearance, you should provide image file for it, by declaring the following CSS classes in corresponding Master page:


    .rade_toolbar.<skinName> .<commandName>
     background-image: url(MyImage.gif)!important;
    .rade_toolbar.Telerik .CustomCommand1
     background-image: url( !important;
  4. Clear the browser's cache and test the result.

In this article