Use Image Manager button of Rad Editor Image Map Editor built-in dialog to use custom Image Manager dialog

[Jean-Paul]

Hello,

We currently have a custom image manager dialog that is opened from a button added to the toolbar of the RadEditor;

ASP.NET

        <telerik:RadEditor ID="RadEditorMessage" runat="server" Width="100%" Height="370px"
            ToolsFile="~/App_Data/RadEditor/Default-ToolsFile.xml" RenderMode="Lightweight" EnableAriaSupport="true">
            <Tools>
                <telerik:EditorToolGroup Tag="FileManagers">
                    <telerik:EditorTool Name="ImgManager" Text="ImageManager" ShowIcon="true" />
                </telerik:EditorToolGroup>
            </Tools>

JAVASCRIPT

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

        var myCallbackFunction = function (sender, args) {
            if (args) {
                if (args.href != '') {
                    editor.pasteHtml(String.format("<img src='{0}' border='0' align='middle' /> ", args.href));
                }
            }
        }

        var args = editor.get_html(true) //returns the HTML of the selection. 

        editor.showExternalDialog(document.getElementById('<%=txtPath.ClientID%>').value,
                                  args,
                                  1024,
                                  600,
                                  myCallbackFunction,
                                  null,
                                  "Image Manager",
                                  false,
                                  Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                                  false,
                                  true);
        };

CODE BEHIND

                txtPath.Text = ResolveUrl("~/Controls/ImageManager.aspx");

We would like to open this custom Image Manager Dialog and return the uploaded image to be used in the Image Map Editor. 

Is this possible ? And if so, can you provide links/example code on how to implement this ?

Thanks,

Jean-Paul

 

[Jean-Paul]

Basically, this link explains what we have done previously with the custom dialog:

https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/dialogs/custom-dialogs

[Rumen]

Hi Jean-Paul,

The Image Map dialog is one of the few editor dialogs which is not designed to be used as a standalone dialog and this is the reason why its integration inside other managers like the Image Manager is not supported since there is no way to pass the dialog params to the Image Map via the dialogOpener function as it is done for example for the ImageEditor dialog inside the ImageManager.ascx external dialog file.

        _openImageMap: function () {
            var that = this,
                selectedItem = this._currentItem;

     
            var args = {};
            args.width = 1000;
            args.height = 1000;


            args.name = selectedItem.get_name();
            args.path = selectedItem.get_path();

            //doesn't work 
            var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();
            dialogOpener.open("ImageMap", args);

        },

[Jean-Paul]

Greetings Rumen !

First of all thanks for your answer.

However, there appears to be a slight misunderstanding.  We don't want to open the Image Map dialog from the Image Manager.  It is actually the opposite. We want to open our custom Image Manager dialog from the built-in Image Map Editor.

Thanks,

JP

[Rumen]

Hi JP,

Thank you for the clarification!

Here is the solution:

1) Copy the EditorDialogs folder from the RadControls for ASP.NET AJAX installation to the root of your project
2) Set the editor's ExternalDialogsPath property to point to the EditorDialogs folder, e.g.

<telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs">
     <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
     <Content>
         <img alt="my image" src="someimage.png" />
     </Content>
</telerik:RadEditor>

3) Open the \EditorDialogs\ImageMap.ascx file, locate the

 

<tools:ImageDialogCaller id="ImageSrc" runat="server" />
<!-- 
The purpose of the ImageDialogCaller user control is to launch the built-in Image Manager dialog, from dialogs like the ImageMap, SetimageProperties, Table and Cell Properties and Style Builder, and to return its value back to the opener dialog which in our case is the ImageMap Image file selection input.
-->

control and paste the following script below it which will override the built-in _onButtonClickHandler handler of the ImageDialogCaller and allow the communication with the custom Image Manager dialog:

<script type="text/javascript">
            Telerik.Web.UI.ImageDialogCaller.prototype._onButtonClickHandler = function(e)
            {
                var thisObject = this;
                var callbackfunction = function(sender, args)
                {
                    var src = args;
                    if (src)
                    {
                        thisObject._inputElement.value = src;
                        thisObject.raiseEvent("valueSelected");
                    }
                }
                var args = {editor : this.get_editor()};

                this._editor.showExternalDialog(
                  'CustomImageManager.aspx', //specify here the custom dialog file name
                  args,
                  600,
                  400,
                  callbackfunction,
                  null,
                  'CustomImageManager',
                  true,
                  null,
                  false,
                  false)
            };
            </script>

The CustomImageManager.aspx parameter of showExternalDialog is the custom dialog that will be opened when clicking on the Image Manager  (ImageDialogCaller) button 
 .

Here is the content of my test CustomImageManager.aspx, which should be placed at the root of the web project:

<%@ Page language="c#" %> 

<!DOCTYPE HTML > 
<html> 
  <head> 
        <title>Image Manager</title> 

  <script type="text/javascript"> 
function getRadWindow() //mandatory for the RadWindow dialogs functionality 
{ 
    if (window.radWindow) 
    { 
        return window.radWindow; 
    } 
    if (window.frameElement && window.frameElement.radWindow) 
    { 
        return window.frameElement.radWindow; 
    } 
return null; 
} 

function initDialog() //called when the dialog is initialized 
{ 
    var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page 
} 

if (window.attachEvent) 
{ 
    window.attachEvent("onload", initDialog); 
} 
else if (window.addEventListener) 
{ 
    window.addEventListener("load", initDialog, false); 
} 

  function GetImageUrl(listBoxId ) 
  { 
    var listbox = document.getElementById( listBoxId ); 
    var url = listbox[listbox.selectedIndex].value; 
    if( url != "" ) 
    {        
        getRadWindow().close(url); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function of the ImageMap dialog
    } 
  } 
  </script> 
  </head> 
    <body> 
        <form id="Form1" method="post" runat="server"> 
            <table id="Table1" cellSpacing="0" cellPadding="1"  border="0"> 
                <tr> 
                <td colspan=2>Select an image:</td> 
                </tr><TR> 
                    <TD> 
                        <asp:ListBox id="ListBox1" runat="server" Width="224px" Rows="8"> 
                            <asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image1</asp:ListItem> 
                            <asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image2</asp:ListItem> 
                            <asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image3</asp:ListItem> 
                            <asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image4</asp:ListItem> 
                            <asp:ListItem Value="http://www.telerik.com/demos/aspnet/Editor/Img/productBox.gif">Image5</asp:ListItem> 
                        </asp:ListBox></TD> 
                    <TD vAlign="top"> 
                        <button id="Button1" onclick="return GetImageUrl('<%=this.ListBox1.ClientID%>');" style="BORDER-RIGHT: dimgray 1px solid; BORDER-TOP: dimgray 1px solid; BORDER-LEFT: dimgray 1px solid; WIDTH: 64px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 24px" type=button>Insert</Button></TD> 
                </TR> 
            </table> 
        </form> 
    </body> 
</html> 

For your convenience, I have attached my test project.

Best Regards,
Rumen
Progress Telerik

[Jean-Paul]

We modified the code to our custom specs and it works like a charm.

Thank you Rumen !

[Rumen]

Great news, thank you for sharing it! 

On my side, I also created a KB article on the matter to help your fellow developers: 

Call a custom dialog from the Image Manager ImageDialogCaller button.