Sitefinity: RadEditor with image manager

354 Views Asked by At

I have created a control using RadEditor and image manager (follow link: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity/radeditor-image-manager).

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

http://www.sitefinity.com/clientsfiles/e12f501e-37c1-6deb-a958-ff0000446526_image-1.png?sfvrsn=0

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>

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

Thanks you very much.

0

There are 0 best solutions below