RadEditor with image manager

Posted by Community Admin on 04-Aug-2018 01:31

RadEditor with image manager

All Replies

Posted by Community Admin on 09-Dec-2014 00:00

Hi All.

I have created a control using RadEditor and image manager (follow link: www.sitefinity.com/.../radeditor-image-manager).

When user click button "Insert an image" it show "ImageLibraryDialog" and user can select an image as image-1.

My problem is: How to append selected image  to radEditor control when click button save in "ImageLibraryDialog".

Here is my code in .ascx designer:

 

 <telerik:RadEditor ID="HtmlSocial" runat="server" Width="600px"  ClientIDMode="Static" OnClientLoad="OnClientLoad"
                ToolsFile="~/Extensions/RadEditor/ToolsFile.xml"
                ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
                >
                <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                <Content>
                </Content>
            </telerik:RadEditor>

 

And here is the script to open image library dialog:

 

<script type="text/javascript">

 

    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function (commandName, editor, args)
        var editorArgs = editor.getSelectedElement();
        //if (!editorArgs || !editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
        //    editorArgs = editor.getSelection();

        var myCallbackFunction = function (sender, args)
            alert(1);
            debugger;
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                args.parentNode.replaceChild(editorArgs, args);
            else
               // InsertTextArea();
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
               
           
        ;
        editor.showExternalDialog(
            '<%= ResolveUrl("~/Sitefinity/Dialog/MediaContentManagerDialog/?mode=Image")%>',
            editorArgs,
            750,
            600,
            myCallbackFunction,
            null,
            'ImageLibraryDialog',
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
    ;
    function InsertTextArea()
        var editor = $find('<%=HtmlSocial.ClientID%>');
        editor.set_html('<textarea id="myTableToFind" style='overflow:hidden; height: 300px; width: 500px;' border='none'></textarea>');
   

                </script>

- When user click button save in image-1: I have an error: Uncaught TypeError: undefined is not a function (please see: Image-2) 

 

 Please tell me how to append selected image  to radEditor control when click button save in "ImageLibraryDialog".

 

Thanks you very much.

  

This thread is closed