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

Forums / Developing with Sitefinity / Hyperlink in custom webeditor is not working

Hyperlink in custom webeditor is not working

4 posts, 0 answered
  1. kiran
    kiran avatar
    13 posts
    Registered:
    04 Jun 2009
    26 Aug 2009
    Link to this post
    Hi ,

    I have created custom WebEditor  for a property in user control by following the below link shown
    http://www.sitefinity.com/support/forums/sitefinity-3-x/suggestions/need-textarea-control-on-edit-panel-of-a-usercontrol.aspx.
    But the hyperlink in that radEditor is not working.do i need to add any tags.......
    can anyone explain?

    Thanks
    Kiran Kumar Gunda
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    27 Aug 2009
    Link to this post
    Hello kiran,

    Actually the hyperlink is working. It is hidden behind the RadEditor window because of the value of z-index.
    Try changing the z-index to 1000 in the class below located under Sitefinity/Admin/Themes/Default/PropertyDlg.css

    div.Dialog    { 
        background#F0F3F4 !important; 
        positionabsolute;        
        z-index: 1000; 
        /*filter: progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#637783,strength=3);*/ 
        margin-right: 0;     
        text-allign: center
        width600px !important; 
        height450px !important; 
        left230px
        top10px;   
        overflow:hidden
        border1px solid #666
        padding10px 15px 15px 15px;      
        } 


    Kind 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.
  3. kiran
    kiran avatar
    13 posts
    Registered:
    04 Jun 2009
    27 Aug 2009
    Link to this post
    Hello Ivan,
                   Thanks for your reply.Its working great but in hyperlink popup i want  a link "Select a page from this site"  to select the page  just as like in "Inser Link" pop up of Generic Content.How can i achieve this.

    Thanks
    Kiran Kumar Gunda
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    27 Aug 2009
    Link to this post
    Hello kiran,

    In this case you do not have to create the RadEditor dynamically.
    1. Create a custom control which inherits from WebUITypeEditor.
    2. In this control create a class that inherits from ITemplate.
    3. Create a custom template for your control that uses the following declaration of RadEditor.

    <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="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 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) 
                    }; 
                    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'; 
                            bdbd.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> 


    4. Override CreateChildControls and call your template

       this.template = ControlUtils.GetTemplate<DefaultTemplate>(this.TemplatePath); 


    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.
Register for webinar
4 posts, 0 answered