This is a migrated thread and some comments may be shown as answers.

[Solved] Customised Image Manager

2 Answers 115 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Andrew Johns asked on 12 Aug 2009, 04:13 PM

Using various help articles I've read on this site, I've overridden the Image Manager dialogue in my Editor, and for the most part it seems to work, in that the selected image is placed into my text editor correctly, but then clicking on the newly placed image (left or right click), or selecting it using the keyboard, gives me an error. By the looks of things, focusing on the image is what triggers it. I don't have any interest in passing the selected image back to the image mamager, or providing context menu support, only perhaps to be able to cut/paste the image tag that it generated.

Webpage error details:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; InfoPath.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; WWTClient2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 12 Aug 2009 15:59:46 UTC

Message: 'top' is null or not an object
Line: 2255
Char: 1
Code: 0
URI: http://localhost/myproject/ScriptResource.axd?d=hpeMsrj0DJn-Q2ateRZcjsIrr_IeFTKdapS0Cz_SmT0NhhOD6wbIAdPCt04I7VrGdieSBHWkP2PpIWSzPTrQig2&t=7dfff488

My code so far is that I have a radEditor inside a usercontrol, which sits inside a radPageView, which is defined in my default.aspx page

                <telerik:RadEditor
                    ID="AbstractContent"
                    runat="server"
                    ToolsFile="xml/advancedtoolsfile.xml"
                    Skin="Telerik"
                    AutoResizeHeight="false"
                    EnableResize="false"
                    Width="800"
                >
                <ContextMenus>
                    <telerik:EditorContextMenu TagName="IMG" Enabled="false" />
                </ContextMenus>
                </telerik:RadEditor>

                <script type="text/javascript">
                    Telerik.Web.UI.Editor.CommandList["ImageManager"] = function(commandName, editor, args) {
                        var elem = editor.getSelectedElement(); //returns the selected element.

                        if (elem.tagName == "IMG") {
                            editor.selectElement(elem);
                            argument = elem;
                        }
                        else {
                            var img = editor.get_document().createElement("IMG");
                            argument = img;
                        }

                        var myCallbackFunction = function(sender, args) {
                            editor.pasteHtml(String.format("<img src='{0}' title='{1}' alt='{2}' />", args.src, args.altText, args.altText))
                        }

                        editor.showExternalDialog(
                            'InsertMedia.aspx',
                            argument,
                            900,
                            500,
                            myCallbackFunction,
                            null,
                            'Insert Image',
                            true,
                            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                            false,
                            false);
                    };
                    </script>

with my InsertMedia.aspx page having a gridview that allows a user to sort/filter a database managed image collection, with this small block of javascript underneath:

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

and the InsertMedia.aspx.cs having the following, which occurs when the "select" server side event fires in my dialogue window:

    
            System.Text.StringBuilder sb = new System.Text.StringBuilder();

            sb.Append("var workImage = getRadWindow().ClientParameters;");

            sb.Append(String.Format("workImage.src = '{0}{1}';", GetMediaRootWebPath(), SelectedMediaContent.UrlPrimary));

            sb.Append(String.Format("workImage.altText = '{0}';", SelectedMediaContent.AltText));

            sb.Append("getRadWindow().close(workImage);");

            this.Page.ClientScript.RegisterStartupScript(this.GetType(), "ReturnImage", sb.ToString(), true);

As I say, the system seems to be working as it places the created <img> tag in the editor window, but then focusing on the new img results in the error I pasted above. Any suggestions on what I might need to disable to stop this error? I very much doubt I need it to do whatever it's trying to do when I focus on it!

Cheers,

Andrew

[Solved] Customised Image Manager

2 Answers, 1 is accepted