Add Custom Dialog

Telerik Web Parts for SharePoint 2010 last build was R1 2023 SP2 and is discontinued since then.

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>