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 MOSS:

  1. Open the respective ToolsFile situated in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0**1f131a624888eeed/Resources folder and add the custom button's declaration e.g.

  2. Next, open the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0**1f131a624888eeed/Resources/MOSSEditorTools.js and add the custom tool's command:

    JavaScript

    Telerik.Web.UI.Editor.CommandList["CustomCommand1"] = function (commandName, editor, args)
    {
        alert("Custom command 1");
        //for example you can apply bold formatting by firing the editor.fire("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:

    CSS

    .rade_toolbar.<skinName> .<commandName>
    {
     background-image: url(MyImage.gif)!important;
    }
    .rade_toolbar.Telerik .CustomCommand1
    {
     background-image: url(https://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif)!important;
    }
    
  4. Clear the browser's cache and test the result.

In this article