1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / RadEditor Image Manager

RadEditor Image Manager

2 posts, 0 answered
  1. martin
    martin avatar
    36 posts
    Registered:
    30 Nov 2008
    16 Apr 2010
    Link to this post
    Hi

    I have create a backend control that uses teleriks radEditor,

    <telerik:RadEditor NewLineBr="false" runat="server" ID="txtSummary" ToolsFile="~/Modules/EditorToolsFile.xml" EnableEmbeddedSkins="True" Skin="WebBlue" EditModes="Design, Html">
                          
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images,~/Images/UserA" SearchPatterns="*.gif,*.jpg,*.jpeg,*.png,*.bmp"/>

    When I select the image manager I need to upload images to a folder, is there anyway to use the image and document control in sitefinity instead. eg, select an image that I have already uploaded to the image&document libraries.


    Thanks
    Kieran
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    16 Apr 2010
    Link to this post
    Hi martin,

    You need to add the Sitefinity's dialogs to your control by using js as shown below. This will allow you to select images and documents from Images and Documents library.

    <telerik:RadEditor
    runat="server"
    ID="Editor"
    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                  
    Skin="WebBlue"                    
    NewLineBr="False"
    Width="95%"
                      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" />
                        <CssFiles>
                            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                        </CssFiles>
                    </telerik:RadEditor>
                    <script type="text/javascript">
     
                    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args)
                    {
                       var editorArgs = editor.getSelectedElement();
                       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                            editorArgs = editor.getSelection();
                        
                       var myCallbackFunction = function(sender, args)
                       {
                            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                                args.parentNode.replaceChild(editorArgs, args);
                            else
                            {
                                var cloned = args.cloneNode(true);
                                var div = args.ownerDocument.createElement("DIV");
                                div.appendChild(cloned);
                                editorArgs.pasteHtml(div.innerHTML);
                            }
                       }
                       editor.showExternalDialog(
                       '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',
                       editorArgs,
                       750,
                       600,
                       myCallbackFunction,
                       null,
                       'ImageLibraryDialog',
                       true,
                       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                       false,
                       true)
                    };
     
                    Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args)
                    {
                       var editorArgs = editor.getSelectedElement();
                       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                            editorArgs = editor.getSelection();
                        
                       var myCallbackFunction = function(sender, args)
                       {
                            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                                args.parentNode.replaceChild(editorArgs, args);
                            else
                            {
                                var cloned = args.cloneNode(true);
                                var div = args.ownerDocument.createElement("DIV");
                                div.appendChild(cloned);
                                editorArgs.pasteHtml(div.innerHTML);
                            }
                       }
                       editor.showExternalDialog(
                       '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>',
                       editorArgs,
                       750,
                       600,
                       myCallbackFunction,
                       null,
                       'ImageLibraryDialog',
                       false,
                       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                       false,
                       true)
                    };
     
                    
                    // automated tests helper function
                    function InsertTextArea()
                    {
                        var editor = $find('<%=Editor.ClientID%>');
                        editor.set_html('<textarea id="myTableToFind" style="overflow:hidden; height: 300px; width: 500px;" border="none"></textarea>');
                    }
                     
                    </script>


    and modify the Library and Document manages of EditiorToolsFile.xml as shown below

    <tool name="LibraryImageManager" text="Insert an image"/>
    <tool name="LibraryDocumentManager" text="Insert a document"/>


    All the best,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
2 posts, 0 answered