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

Forums / Bugs & Issues / Error "The command LibraryImageManager is not implemented yet." when using RadEditor in custom control

Error "The command LibraryImageManager is not implemented yet." when using RadEditor in custom control

5 posts, 1 answered
  1. lgramatikov
    lgramatikov avatar
    3 posts
    Registered:
    07 Feb 2008
    30 Sep 2010
    Link to this post
    Hello,

    I have the following scenario:

    1. Custom Sitefinity control (i.e. .ascx registered in <toolboxControls>) with properties:
    [Bindable(true)]
    public string TabTitle1 { get; set; }
    [Bindable(true)]
    [WebEditor("CustomRadEditorWebEditor")]
    public string TabContent1 { get; set; }

    (there are three more sets like the one above)

    2. CustomRadEditorWebEditor code is:

    class CustomRadEditorWebEditor : WebUITypeEditor<string>{
        private string text;
            RadEditor radEditor;
            public override string Value{
                get{
                    return radEditor.Content;
                }
                set{
                    this.text = value;
                }
            }
            protected override void CreateChildControls()
            {
                this.Controls.Clear();
                radEditor = new RadEditor();
                radEditor.ContentAreaCssFile = "~/Sitefinity/ControlTemplates/EditorContentArea.css";
                radEditor.ToolsFile = "~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml";
                radEditor.NewLineBr = false;
                radEditor.Height = Unit.Pixel(360);
                radEditor.Width = Unit.Percentage(98);
                radEditor.Content = text;
                this.Controls.Add(radEditor);
            }
    }

    It is pretty much copy-pasted from another post in this forum. 

    Environment: IIS 7.5(Win2k8 R2), .NET 3.5.1, Sitefinity 3.7 SP4

    Problem is: 
    Command Insert an image shows JavaScript alert  "The command LibraryImageManager is not implemented yet."
    and command "Insert a document" shows JavaScript alert "The command LibraryDocumentManager is not implemented yet."

    As far as I can tell, this setup should work just fine, but for some reason it does not. I did search for solution in this forum, but I either missed it or did not understand it right (and I'm sorry if this is the case). If possible, can you please let me know what can cause these errors? I can provide full source code or access to a test server where this behaviour can be observed.

    Thank you in advance!

    Greetings, Laz
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 Sep 2010
    Link to this post
    Hi lgramatikov,

    Your RadEditor should use the template below 

    <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"
                      DialogsCssFile ="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorDialogs.css"
                      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)
                              };
     
                              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(
                                 '<%= ((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 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/LinksDialog.aspx") %>',
                                 editorArgs,
                                 750,
                                 600,
                                 myCallbackFunction,
                                 null,
                                 'ImageLibraryDialog',
                                 false,
                                 Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                                 false,
                                 true)
                              };
                              var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function
     
                              Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args)
                              {
                                  oldFunction(commandName, editor, args);
                                  var bd = document.getElementsByTagName("body")[0];
                                   
                                  if(/fullScreenMode/.test(bd.className)) {
                                      var rep = bd.className.match(' '+'fullScreenMode')?' '+'fullScreenMode':'fullScreenMode';
                                      bd.className=bd.className.replace(rep,'');
     
                                  } else {
                                      bd.className += bd.className?' '+'fullScreenMode':'fullScreenMode';
                                  }
                              };
     
                              // 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>


    or you have to remove the LibraryImageManager and LibraryDocumentManager  tools from EditorToolsFile.xml

    <tools name="InsertToolbar" dockable="false">
       <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"/>
       <tool name="FlashManager" />
       <tool name="MediaManager" />
     </tools>

    LibraryImageManager and LibraryDocumentManager are custom wrappers for Sitefintiy.


    Sincerely yours,
    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
  3. lgramatikov
    lgramatikov avatar
    3 posts
    Registered:
    07 Feb 2008
    30 Sep 2010
    Link to this post
    Hi Ivan,

    Thank you for you quick answer! I think I did not describe my problem correctly. I want to use RadEditor in Sitefinity and it seems to work apart from using Sitefinity specific LibraryImageManager and LibraryDocumentManager (hence the error). Judging from your answer, my approach is wrong and I have to try using Generic Content control for example. Am I right?

    Kind regards, Laz

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 Sep 2010
    Link to this post
    Hello lgramatikov,

    The error you are getting is thrown because you do not use specific Telerik.Web.UI.Editor.CommandList implemented in the template I sent you. WebEditors are used generally for control properties or control designers. By default your control does not have a template and you cannot use Telerik.Web.UI.Editor.CommandList. You can implement a template for the web editor which will allow you to use it in the current format. You might find this post useful.

    Best wishes,
    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
    Answered
  5. lgramatikov
    lgramatikov avatar
    3 posts
    Registered:
    07 Feb 2008
    30 Sep 2010
    Link to this post
    Hi Ivan, 

    It is clear now, thank you! 

    Чао, Laz

Register for webinar
5 posts, 1 answered