[Solved] Customizing InsertImage and other editor dialogs

[Janean Angeles]

I'm attempting to customize the insertimage.ascx to allow for a custom image dialog to populate the image source.  I reviewed the customization of the linkmanager.ascx and have tried the below code, but I keep getting a javascript error stating that the Telerik.Web.UI.Dialogs is undefined.  I've obviously forgotten something or misunderstood how to access our own image selector.  I've got to use custom dialogs for flash, images and slideshows.  I've got our document dialog working fine with teh LinkManager, but am stuck here.  Any assistance would be great.

<script type="text/javascript">
    function showCustomDialog() {
        debugger;
        var argument = {};

        var callbackFunction = function (sender, args) {
            var oTextBox = $get("ImageSrc");
            oTextBox.value = args;
        }
        var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();
        dialogOpener.openUrl("/custom_editors/Images.aspx", argument, 900, 650, callbackFunction, null, "image manager", true, 36, false, true);
    }
</script>

<div id="InsertImage" class="reInsertImageWrapper" style="display: none;">
    <table cellspacing="0" cellpadding="0" border="0" class="reControlsLayout">
        <tr>
            <td style="vertical-align: top;">
                <label class="reDialogLabelLight" for="ImageSrc">
                    <span>[imagesrc]</span>
                </label>
            </td>
            <td class="reControlCellLight">
                <table border="0" cellpadding="" cellspacing="0">
                    <tr>
                        <td>
                            <input type="text" id="ImageSrc" class="rfdIgnore" />
                        </td>
                        <td style="padding-left: 4px;">
                            <input id="Button1" type="image" value="Browse" onClick="showCustomDialog();return false;" src="/images/icons/image_add.png" class="imgButton"/>
                            <tools:StandardButton runat="server" ToolName="ImageManager" id="ImageManagerCaller" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <label class="reDialogLabelLight" for="ImageAlt">
                    <span>[imagealttext]</span>
                </label>
            </td>
            <td class="reControlCellLight">
                <input type="text" id="ImageAlt" class="rfdIgnore" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="reImgPropertyControlCell">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <label class="reDialogLabelLight" for="ImageWidth">
                                <span>[width]</span>
                            </label>
                        </td>
                        <td>
                            <input type="text" id="ImageWidth" class="rfdIgnore" />  px
                        </td>
                        <td>
                            <label class="reDialogLabelLight" for="ImageHeight">
                                <span>[height]</span>
                            </label>
                        </td>
                        <td>
                            <input type="text" id="ImageHeight" class="rfdIgnore" />  px
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="0" cellpadding="0" cellspacing="0" class="reConfirmCancelButtonsTblLight">
                    <tr>
                        <td align="right">
                            <button type="button" id="iplInsertBtn">
                                [ok]
                            </button>
                        </td>
                        <td>
                            <button type="button" id="iplCancelBtn">
                                [cancel]
                            </button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

[Janean Angeles]

Anyone have any ideas?

[Rumen]

Hello Janean,

The InsertImage dialog is a lite dialog and its contents are part of the current page where RadEditor resides. If you want to open a new dialog from it you can use directly window.open browser's method:

<button onclick="ShowDialog();">Open Dialog</button>
    <script type="text/javascript">
        function ShowDialog() {
            window.open("dialog.html", null, "height=500,width=500,status=no,toolbar=no,menubar=no,location=no");
        }
    </script>

You can get a reference from the child window to the ImageSrc input placed in the parent window (InsertImage dialog) using $get("ImageSrc");

You can find more information on the subject in the following sites:
http://www.rgagnon.com/jsdetails/js-0066.html
http://www.codehappiness.com/post/access-parent-window-from-child-window-or-access-child-window-from-parent-window-using-javascript.aspx


Greetings,
Rumen
the Telerik team