Adding Custom Dialog to RadEditor for MOSS

HOW-TO:
Add custom dialog to the editor's toolbar.

SOLUTION:
In some scenarios it is required to add a custom dialog to the editor's toolbar. Bellow you can review a detailed step by step guide how to achieve the desired behavior:

RadEditor for MOSS v.4.x.x:

1. Depending on your current scenario Web Part and WCM / SharePoint forms scenario (Lists, Wikis, Blogs, etc.) open the ToolsFile.xml/ListToolsFile.xml and add the custom dialog's button like follows:
    
   <root>
     <tools name="MossTools1" dockable="false"> 
     ........
     <tool name="CustomDialog" IconUrl="http://www.telerik.com/demos/aspnet/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif" /> 
     ........
    
   Note that, both the ToolsFile.xml and ListToolsFile.xml are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/4.x.x.0__1f131a624888eeed/RadControls/Editor/ folder.
    
2. Provide a command with the same name in the editor's global commands array, which will call the ShowDialog method, provided by the Telerik RadEditor. Open the \wpresources\RadEditorSharePoint\4.x.x.0__1f131a624888eeed\RadControls\Editor\Scripts\7_x_x\MOSSEditorTools.js file and add the command wich will call the dialog e.g.
   

   var RadEditor1ClientObject = null;

   RadEditorCommandList["CustomDialog"] =

   function CustomDialogCommand(commandName, editor, oTool)

   {

   var args = editor.GetDialogParameters(commandName);

   var argStr = "";

   for (var item in args)

   {

   argStr += "[" + item + "=" + args[item] + "] ";

   }

   alert ("Custom dialog was called with the following arguments: " + argStr);

   RadEditor1ClientObject = editor;

   editor.ShowDialog(

   "/_wpresources/RadEditorSharePoint/4.5.4.0__1f131a624888eeed/RadControls/Editor/Dialogs/MyCustomDialog.html"

   , null//argument

   , 180

   , 80

   , CustomDialogCallback

   , null

   , "Custom Dialog");

   };

   function CustomDialogCallback(returnValue)

   {

   alert("This function is called when the dialog is closed");

   if (returnValue)

   {

   RadEditor1ClientObject.PasteHtml("<a href=\"" + returnValue.url + "\">" + returnValue.text + "</a>");

   }

   }

   
    
3. Place the MyCustomDialog.html in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/4.x.x.0__1f131a624888eeed/RadControls/Editor/Dialogs folder. Open the MyCustomDialog.html and modify the following paths depending your exact control's version:
   

   <link rel="stylesheet" type="text/css" href="/_wpresources/RadEditorSharePoint/4.x.x.0__1f131a624888eeed/RadControls/Editor/Skins/Default/Dialogs.css"></link>

   <script type="text/javascript" src="/_wpresources/RadEditorSharePoint/4.x.x.0__1f131a624888eeed/RadControls/Editor/Scripts/7_x_x/RadWindow.js"></script>

    
   
4. Open MOSS clear the browser's cache and test the dialog.

RadEditor for MOSS v.5.x.x:

1. Depending on your current scenario Web Part and WCM / SharePoint forms scenario (Lists, Wikis, Blogs, etc.) open the ToolsFile.xml/ListToolsFile.xml and add the custom dialog's button like follows:
    
   <root>
     <tools name="MossTools1" dockable="false"> 
     ........
     <tool name="LibraryImageManager" IconUrl="http://www.telerik.com/demos/aspnet/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif" /> 
     ........
    
   Note that, both the ToolsFile.xml and ListToolsFile.xml are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder.
    
2. Provide a command with the same name in the editor's global commands array, which will call the showExternalDialog method, provided by the Telerik RadEditor. Open the \wpresources\RadEditorSharePoint\5.x.x.0__1f131a624888eeed\Resources\MOSSEditorTools.js file and add the command wich will call the dialog e.g.
   

   Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args)

   {

   var myCallbackFunction = function(sender, args)

   {

   editor.set_html(args);

   }

   var arg = editor.get_html();

   editor.showExternalDialog(

   '/_wpresources/RadEditorSharePoint/5.0.0.0__1f131a624888eeed/Resources/Dialogs/LibraryImageDialog.aspx',

   arg,

   600,

   400,

   myCallbackFunction,

   null,

   'ImageLibraryDialog',

   true,

   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

   false,

   false)

   };

   
    
3. Place the LibraryImageDialog.aspx in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/Dialogs folder.
    
4. Open MOSS clear the browser's cache and test the dialog.