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

Forums / Developing with Sitefinity / Link manager not working in Custom WebEditor

Link manager not working in Custom WebEditor

4 posts, 0 answered
  1. Alexis Vibet
    Alexis Vibet avatar
    2 posts
    Registered:
    02 Feb 2010
    02 Feb 2010
    Link to this post
    Hello,

    I have created a custom control with this property:
    [Telerik.Cms.Web.UI.WebEditor("Telerik.Samples.MyWebEditor, App_Code")]
    public string tab1Content { get; set; }

    App_Code/MyWebEditor.cs
    namespace Telerik.Samples
    {
        public class MyWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<string>
        {
            private RadEditor editor;
            public MyWebEditor()
            {
                editor = new RadEditor();
                editor.ID = "editor1";
                editor.Skin = "Default";
                editor.EnableTheming = true;
                editor.ToolsFile = "~/Files/XMLFile.xml";           
                editor.Visible = true;
                editor.ExternalDialogsPath = "~/EditorDialogs";
                Controls.Add(editor);
            }
     
            public override string Value
            {
                get { return editor.Content ; }
                set { editor.Content = value; }
            }
        }
    }

    /Files/XMLFile.xml
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <tools>
          <tool name="Bold"/>
          <tool name="Italic"/>
          <tool name="Underline"/>
          <tool separator="true"/>
          <tool name="JustifyLeft"/>
          <tool name="JustifyCenter"/>
          <tool name="JustifyRight"/>
          <tool name="JustifyFull"/>
          <tool separator="true"/>
          <tool name="InsertOrderedList"/>
          <tool name="InsertUnorderedList"/>
          <tool name="Outdent"/>
          <tool name="Indent"/>
          <tool name="FormatBlock"/>
          <tool separator="true"/>
          <tool name="linkmanager"/>
          <tool name="unlink"/>
          <tool name="DocumentManager" />
        </tools>
    </root>

    When I want to edit the "tab1Content" property in the backoffice, the control shows a "Select" button next to it. Once clicked, this button displays the RadEditor I have created within App_Code/MyWebEditor.cs.
    The bold, italic and similar buttons work great, however the linkmanager (or the DocumentManager) don't.
    Nothing happens when these buttons are pressed.
    I tried to copy the "EditorDialogs" folder from the Radeditor zip file to the root of my sitefinity project but that did'nt do anything.

    If it is possible, I want to have the same managers that appear in the Generic Content control.

    I'll be very delighted if you could provide an answer.

    Regards,

    Alexis Vibet
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    02 Feb 2010
    Link to this post
    Hi Alexis Vibet,

    You are adding the RadEditor dynamically, but the better option is creating a template for your editor and then adding declaratively the control there.

    sample

    <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>

    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"/>
    </tools>



    Regards,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. Alexis Vibet
    Alexis Vibet avatar
    2 posts
    Registered:
    02 Feb 2010
    03 Feb 2010
    Link to this post
    Hello Ivan,

    Thanks for your answer.

    I don't understand where to put your code (in my ascx file ?).

    If so, how can I link the tab1content property with this editor ?

    [Telerik.Cms.Web.UI.WebEditor("Telerik.Samples.MyWebEditor, App_Code")]
    public string tab1Content { get; set; }

    Will I still use the [Telerik.Cms.Web.UI.WebEditor("Telerik.Samples.MyWebEditor, App_Code")] method with your code ?

    Regards,

    Alexis Vibet
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    03 Feb 2010
    Link to this post
    Hi Alexis Vibet,

    You are adding the RadEditor dynamically, but the better option is creating a template for your editor and then adding declaratively the control there.

    I suggest that you should read this post that explains how to create custom web editor.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
Register for webinar
4 posts, 0 answered