More in this section

Forums / Developing with Sitefinity / Problem with Rad Editor

Problem with Rad Editor

2 posts, 0 answered
  1. A.
    A. avatar
    1 posts
    Registered:
    03 Jul 2008
    03 Jul 2008
    Link to this post

    Hi,

    I have a problem with RadEditor.

    I made a custom property which opens RadEditor conrol according this posting

    http://www.sitefinity.com/support/forums/support-forum-thread/b1043S-hkamb.aspx

    Actually I have two problems with this


    1. How can I change the background of this control? Now it is something like blue (I think that this is picture), I would like it to be like when it is opened for editing a generic content.

    2. When I try to open “insert image” it is opened but under RadEditor and I can’t reach it. What is the cause of this? Also this dialog is different from other which is opened in generic content. Is it possible they to be the same?

    Thanks

  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    03 Jul 2008
    Link to this post
    Hi Albena,

    1.The following RadEditor properties should be set as follows:

    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"  EnableEmbeddedSkins="False"
    Skin="Sitefinity"                   

    Also, you need to apply the ~/Sitefinity/Admin/Themes/Default/Modules.css file in the corresponding master page/normal page.

    2. The following javascript should be registered in your custom control:

    <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"
                editor.get_Document().replaceChild(editorArgs, args); 
            else 
            { 
                var cloned = args.cloneNode(true); 
                var div = args.ownerDocument.createElement("DIV"); 
                div.appendChild(cloned); 
                editorArgs.pasteHtml(div.innerHTML); 
            } 
       } 
       editor.showExternalDialog( 
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>'
       editorArgs,  
       750,  
       600,  
       myCallbackFunction,  
       null,  
       'ImageLibraryDialog',  
       true,  
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
       false,  
       false
    }; 
     
    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"
                editor.get_Document().replaceChild(editorArgs, args); 
            else 
            { 
                var cloned = args.cloneNode(true); 
                var div = args.ownerDocument.createElement("DIV"); 
                div.appendChild(cloned); 
                editorArgs.pasteHtml(div.innerHTML); 
            } 
       } 
       editor.showExternalDialog( 
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>'
       editorArgs,  
       750,  
       600,  
       myCallbackFunction,  
       null,  
       'ImageLibraryDialog',  
       false,  
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
       false,  
       false
    }; 
     
    Telerik.Web.UI.Editor.CommandList["LinkManager"] = 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"
                editor.get_Document().replaceChild(editorArgs, args); 
            else 
            { 
                var cloned = args.cloneNode(true); 
                var div = args.ownerDocument.createElement("DIV"); 
                div.appendChild(cloned); 
                editorArgs.pasteHtml(div.innerHTML); 
            } 
       } 
       editor.showExternalDialog( 
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>'
       editorArgs,  
       750,  
       600,  
       myCallbackFunction,  
       null,  
       'ImageLibraryDialog',  
       false,  
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
       false,  
       false
    }; 
     
    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"
                editor.get_Document().replaceChild(editorArgs, args); 
            else 
            { 
                var cloned = args.cloneNode(true); 
                var div = args.ownerDocument.createElement("DIV"); 
                div.appendChild(cloned); 
                editorArgs.pasteHtml(div.innerHTML); 
            } 
       } 
       editor.showExternalDialog( 
       '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>'
       editorArgs,  
       750,  
       600,  
       myCallbackFunction,  
       null,  
       'ImageLibraryDialog',  
       false,  
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,  
       false,  
       false
    }; 
    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'
        } 
    }; 
     
    </script> 

    Also, the RadEditor tools file should be configured as follows:

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

    Do let us know if you need any further assistance.

    Regards,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
2 posts, 0 answered