Add Custom Dialog

Bellow are the exact steps that demonstrate how to add your custom dialog 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 that will open the dialog e.g. <tool name="CustomDialog" />

2. To improve the button's appearance, add image file for it, by setting the following CSS class in corresponding Master page:

   XML

   <style type="text/css">     
       .rade_toolbar.<skinName> .<commandName>
       {
        background-image: url(MyImage.gif)!important;
       }
       .rade_toolbar.Telerik .CustomDialog
       {
        background-image: url(https://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif)!important;
       }
   </style>
   

3. Open the \wpresources\RadEditorSharePoint\6.x.x.0__1f131a624888eeed\Resources\SPEditorTools.js file and provide a command with the same name in the editor's global commands array, which will call the showExternalDialog(url, argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar) function:

   JavaScript

   Telerik.Web.UI.Editor.CommandList["CustomDialog"] = function(commandName, editor, args)
   {
        var myCallbackFunction = function(sender, args)  
           {  
           editor.set_html(args);  
           }  
   
          var arg = editor.get_html();   
          editor.showExternalDialog(  '/_wpresources/RadEditorSharePoint/5.x.x.0**1f131a624888eeed/Resources/Dialogs/CustomDialog.aspx',
          arg,
          600,
          400,
          myCallbackFunction,
          null,  
          'CustomDialog',
          true,  
          Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
          false,  
          false);  
   };
   

4. Put your custom dialog in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/6.x.x.0__1f131a624888eeed/Resources/Dialogs folder and make sure that can be accessed.

5. Clear the browser's cache and test the behavior.

Bellow is a sample custom dialog's source:

<style type="text/css">     
    .rade_toolbar.<skinName> .<commandName>
    {
     background-image: url(MyImage.gif)!important;
    }
    .rade_toolbar.Telerik .CustomDialog
    {
     background-image: url(https://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif)!important;
    }
</style>