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

Forums / Developing with Sitefinity / The command libraryimagemanager is not implemented yet

The command libraryimagemanager is not implemented yet

9 posts, 0 answered
  1. Randy Bauer
    Randy Bauer avatar
    67 posts
    Registered:
    25 Sep 2009
    11 Nov 2009
    Link to this post
    Editing this post because I keep making changes trying to figure this out.  I now have two issues related to getting this to work.

    I am creating my own Custom Control to allow the end users to create and modify a post.  One is the CreateBlogPost.aspx page and the other is the UpdateBlogPost.aspx page.


    Issue #1 - I want to be able to have users insert images into the content window.  I tried the steps below, but with no success.  I also tried changing the tool item from LibraryImageManager to ImageManager.  ImageManager will come up, but I can't uplooad any images.  Plus, I just want them to upload an image, not modify and format it.

    Issue #2 - When I get an existing post that has images (created using cms admin), the images are not displaying.  I'm seeing the red X with the image description.

    Earlier text from issue #1:

    I'm getting the above error when I click on the insert image icon in the radEditor.  This is my own user control and I created my own EditorToolsFile.xml file.  The icons are not appearing correctly either, they have an i bubble look (see attatched). 

    What else do I need to do to enable uploading images into the radEditor?  This does work as part of the CMS Administration within Sitefinity.

    <root> 
        <tools name="MainToolbar" dockable="false" enabled="true">  
            <tool name="Bold" /> 
            <tool name="Italic" /> 
            <tool separator="true"/>  
            <tool name="JustifyLeft" /> 
            <tool name="JustifyCenter" /> 
            <tool name="JustifyRight" /> 
            <tool name="JustifyFull" /> 
              
            <tool separator="true"/>  
            <tool name="Cut" /> 
            <tool name="Copy" /> 
            <tool name="PasteFromWordNoFontsNoSizes" /> 
            <tool name="PastePlainText" /> 
     
            <tool separator="true"/>  
            <tool name="Undo" /> 
            <tool name="Redo" /> 
              
            <tool separator="true"/>  
            <tool name="LibraryImageManager" text="Insert an image" /> 
            <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>  
            <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>  
        </tools> 
    </root> 

    Thanks,

    Randy
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    11 Nov 2009
    Link to this post
    Hello Randy Bauer,

    Try using the following code:

    <telerik:RadEditor
           ID="RadEditor1"
           runat="server"
           ToolsFile="~/Sitefinity/ControlTemplates/MyProvider/ToolsFile.xml"
           EnableEmbeddedSkins="True"
           Skin="Default"
           DialogsCssFile ="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorDialogs.css"
           Height="200px"
           EditModes="Design,Html"
           Width="95%">
           <CssFiles>
               <telerik:EditorCssFile Value="~/Sitefinity/ControlTemplates/MyProvider/EditorCssFile.css" />
           </CssFiles>
       </telerik:RadEditor>

    sample ToolsFile

    <root>
     
      <tools name="Formatting" enabled="true" dockable="true">
        <tool name="LibraryImageManager" text="Insert an image" />
        <tool name="LibraryDocumentManager" text="Insert a document" />
        <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
      </tools>
     
    </root>


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Randy Bauer
    Randy Bauer avatar
    67 posts
    Registered:
    25 Sep 2009
    11 Nov 2009
    Link to this post
    Tried these changes, but still get the same error.  Here is what I have in my UpdateBlogPost.aspx file:

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="UpdateBlogPost.ascx.vb" Inherits="UserControls_UpdateBlogPost" %> 
    <div id="createBlog">  
        <asp:Table id="Table1" runat="server" style="margin: 0 auto;">  
            <asp:TableRow> 
                <asp:TableCell HorizontalAlign="Right">  
                    <asp:Label runat="server" ID="lblTitle" Text="Title:"></asp:Label> 
                </asp:TableCell> 
                <asp:TableCell> 
                    <asp:TextBox ID="txtTitle" runat="server" MaxLength="50" Width="300px"></asp:TextBox> 
                </asp:TableCell> 
            </asp:TableRow> 
            <asp:TableRow> 
                <asp:TableCell HorizontalAlign="Right" VerticalAlign="Top">  
                    <asp:Label runat="server" ID="lblContent" Text="Content:"></asp:Label> 
                </asp:TableCell> 
                <asp:TableCell> 
                    <telerik:RadEditor  
                       ID="redContent" 
                       runat="server" 
                       ToolsFile="~/Sitefinity/ControlTemplates/Blogs/ToolsFile.xml" 
                       EnableEmbeddedSkins="True" 
                       Skin="Default" 
                       DialogsCssFile ="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorDialogs.css" 
                       Height="200px" 
                       EditModes="Design,Html" 
                       Width="95%">  
                       <CssFiles> 
                           <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" /> 
                       </CssFiles>   
                    </telerik:RadEditor> 
                </asp:TableCell> 
            </asp:TableRow> 
            <asp:TableRow> 
                <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" Height="50px">  
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit"/>  
                </asp:TableCell> 
            </asp:TableRow> 
        </asp:Table> 
    </div> 

    <root> 
      <tools dockable="false">  
        <tool name="Bold" shortcut="CTRL+B"/>  
        <tool name="Italic" shortcut="CTRL+I"/>  
      </tools> 
      <tools dockable="false">  
        <tool name="LinkManager" shortcut="CTRL+K"/>  
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>  
      </tools> 
        <tools dockable="false">  
            <tool name="AjaxSpellCheck" shortcut="F7"/>  
      </tools> 
      <tools dockable="false">  
          <tool name="FormatCodeBlock" text="Format Code Block Dialog" /> 
      </tools> 
        <tools name="Formatting" enabled="true" dockable="true">  
            <tool name="LibraryImageManager" text="Insert an image" /> 
            <tool name="LibraryDocumentManager" text="Insert a document" /> 
            <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>  
            <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>  
        </tools> 
     
        <cssFiles> 
        <item name="~/Sitefinity/ControlTemplates/EditorContentArea.css" /> 
      </cssFiles> 
    </root> 


    This is my own usercontrol.

    Thanks,

    Randy
  4. Randy Bauer
    Randy Bauer avatar
    67 posts
    Registered:
    25 Sep 2009
    11 Nov 2009
    Link to this post

    I just read the message regarding updating posts do not get submitted to support, so I am trying this again.

    I am creating my own Custom Control to allow the end users to create and modify a post.  One is the CreateBlogPost.aspx page and the other is the UpdateBlogPost.aspx page.

    Issue #1 - I want to be able to have users insert images into the content window.  I tried the steps below, but with no success.  I also tried changing the tool item from LibraryImageManager to ImageManager.  ImageManager will come up, but I can't uplooad any images.  Plus, I just want them to upload an image, not modify and format it.

    Issue #2 - When I get an existing post that has images (created using cms admin), the images are not displaying.  I'm seeing the red X with the image description.  See issue_2 image attached.

    Thanks,

    Randy

  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    11 Nov 2009
    Link to this post
    Hi Randy Bauer,

    Please try/integrate the code attached as an archive to this post. I checked it locally and it works without problems. The control I am sending you will use the file uploaded through Images and Documents module.

    Let me know if the problem persists.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Randy Bauer
    Randy Bauer avatar
    67 posts
    Registered:
    25 Sep 2009
    11 Nov 2009
    Link to this post
    Hi Ivan,
    Thanks, this is what I've been trying to do.  I got your code sample to work, but I have two issue.

    1)  The icon is still an 'i' in a bubble.
    2)  I'm trying to get this to work in VB, with your converter, with no luck.  I've tried both converting your code to VB and my code to C#.  Could you please supply this sample in VB?  When I move the JavaScript to a vb page, it give me a missing ')' error.

    Thanks in advance,

    Randy
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    12 Nov 2009
    Link to this post
    Hi Randy Bauer,

    1. Add the following classes to your theme style sheet.

    .LibraryImageManager {
    background-position:-365px 50% !important;
    }
     
    .LibraryDocumentManager {
    background-position:-186px 50% !important;
    }

    2. The control I sent you does not have any code it is only declaration so you need to change the language only - from C# to VB

    <%@ Control Language="C#" .....%>


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Randy Bauer
    Randy Bauer avatar
    67 posts
    Registered:
    25 Sep 2009
    12 Nov 2009
    Link to this post
    Hello,
    Thanks for solving the first issue, but still having the same error with the second.

    1 - Adding the classes to the themed style sheet fixed the issue with the image.

    2 - Changing the Language from C# to VB causes an error:  ')' expected.  I've been walking through the code trying to see where it is missing, but no luck.  Here is the ascx page that I am currently working with.  I have no code in the codebehind page.  While in the VS development environment, the first line has a green squiggly line under it and has an error:  ')' expected.

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="CreateBlogPostVB.ascx.vb" Inherits="UserControls_CreateBlogPostVB" %> 
     
    <telerik:RadEditor   
            ID="RadEditor1"   
            runat="server" 
            ToolsFile="~/UserControls/CustomPublicControl/ToolsFile.xml" 
            EnableEmbeddedSkins="True"   
            Skin="Default"   
            DialogsCssFile ="~/UserControls/CustomPublicControl/EditorDialogs.css" 
            Height="200px" 
            EditModes="Design,Html" 
            Width="95%">  
    </telerik:RadEditor> 
     
    <script type="text/javascript">  
        Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {  
            var editoreditorArgs = editor.getSelectedElement();  
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  
                editoreditorArgs = 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 editoreditorArgs = editor.getSelectedElement();  
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  
                editoreditorArgs = 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)  
        };  
     
        Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {  
            var editoreditorArgs = editor.getSelectedElement();  
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {  
                var sel = editor.getSelection();  
                editorArgs = sel;  
                editorArgs.Html = sel.getHtml();  
                editorArgs.Text = sel.getText();  
            }  
     
            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/LinksDialog.aspx") %>',  
                                   editorArgs,  
                                   750,  
                                   600,  
                                   myCallbackFunction,  
                                   null,  
                                   'ImageLibraryDialog',  
                                   false,  
                                   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
                                   false,  
                                   true)  
        };  
     
        Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {  
            var editoreditorArgs = editor.getSelectedElement();  
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")  
                editoreditorArgs = 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/LinksDialog.aspx") %>',  
                                   editorArgs,  
                                   750,  
                                   600,  
                                   myCallbackFunction,  
                                   null,  
                                   'ImageLibraryDialog',  
                                   false,  
                                   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
                                   false,  
                                   true)  
        };  
                                 
    </script> 
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    16 Nov 2009
    Link to this post
    Hello Randy Bauer,

    As far as I see it you have not run these code to check whether it work or not. There are C# casts in the js that are not converted. The missing ')' will not cause any problems. It comes from intellisense.
    Please use the code below:

    <telerik:RadEditor
            ID="RadEditor1"
            runat="server"
            ToolsFile="~/CustomControls/CustomPublicControl/ToolsFile.xml"
            EnableEmbeddedSkins="True"
            Skin="Default"
            DialogsCssFile ="~/CustomControls/CustomPublicControl/EditorDialogs.css"
            Height="200px"
            EditModes="Design,Html"
            Width="95%">
    </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(
                                   '<%= CType(Page,Telerik.Cms.Web.CmsPageBase).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(
                                   '<%= CType(Page,Telerik.Cms.Web.CmsPageBase).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)
        };
     
        Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {
            var editorArgs = editor.getSelectedElement();
            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {
                var sel = editor.getSelection();
                editorArgs = sel;
                editorArgs.Html = sel.getHtml();
                editorArgs.Text = sel.getText();
            }
     
            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(
                                   '<%= CType(Page,Telerik.Cms.Web.CmsPageBase).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
                                   editorArgs,
                                   750,
                                   600,
                                   myCallbackFunction,
                                   null,
                                   'ImageLibraryDialog',
                                   false,
                                   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                                   false,
                                   true)
        };
     
        Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = 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(
                                   '<%= CType(Page,Telerik.Cms.Web.CmsPageBase).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
                                   editorArgs,
                                   750,
                                   600,
                                   myCallbackFunction,
                                   null,
                                   'ImageLibraryDialog',
                                   false,
                                   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                                   false,
                                   true)
        };
                                
    </script>

    Modify DialogsCssFile and ToolsFile properties depending on the location of your files.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
9 posts, 0 answered