Add Custom Dialog
Bellow are the exact steps that demonstrate how to add your custom dialog when using RadEditor for SP2010:
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" />
-
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>
-
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); };
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.
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>