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

Add Custom Dialog

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

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 that will open the dialog e.g.

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

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;
 }

Open the \wpresources\RadEditorSharePoint\5.x.x.0**1f131a624888eeed\Resources\MOSSEditorTools.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);
 };

Put your custom dialog in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0**1f131a624888eeed/Resources/Dialogs folder and make sure that can be accessed.
Clear the browser's cache and test the behavior.

Bellow is a sample custom dialog's source:

ASP.NET

<%@ page language="C#" autoeventwireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form2" runat="server">
	<fieldset style="width: 214px; height: 190px">
		<input type="text" id="content" style="width: 350px; height: 290px"><br />
		<input type="button" onclick="return content_onclick()" value="Return content" />
	</fieldset>
	<script type="text/javascript">
		if (window.attachEvent)
		{
			window.attachEvent("onload", initDialog);
		}
		else if (window.addEventListener)
		{
			window.addEventListener("load", initDialog, false);
		}

		var content = document.getElementById("content");
		function getRadWindow()
		{
			if (window.radWindow)
			{
				return window.radWindow;
			}
			if (window.frameElement && window.frameElement.radWindow)
			{
				return window.frameElement.radWindow;
			}
			return null;
		}
		var clientParameters;
		function initDialog()
		{

			clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page

			content.value = clientParameters;
		}
		var returnValue;
		function content_onclick() //fires when the Insert Link button is clicked
		{
			returnValue = content.value;
			getRadWindow().close(returnValue); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
		}
	</script>
	</form>
</body>
</html>