Custom Dialog to add and edit anchors

Thread is closed for posting
2 posts, 0 answers
  1. 62E36182-692C-4961-B6F2-DEDE7BBACF59
    62E36182-692C-4961-B6F2-DEDE7BBACF59 avatar
    17 posts
    Member since:
    Sep 2007

    Posted 05 Mar 2009 Link to this post

    Requirements
    RadControls version 2008.3 1314

    .NET version 2.0 / 3.5

    Visual Studio version 2008

    programming language asp.net / Javascript

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    I wanted to have an easy way to add and edit anchors. In my case i used the Editor as my default editor in DotNetNuke 5.0 but i think this solution is for other configurations to.
    I used 2 different example codes that i have merged for my solution. So its maybe nothing new but hopefully it is useful.

    First step is showing the anchors in the editor. Therefor i added a OnClientLoad event to my radEditor. In DotNetNuke you can do this in the web.config. OnClientLoad="OnRadEditorLoad"

        <htmlEditor defaultProvider="RadEditorProvider"> 
          <providers> 
            <clear /> 
            <add name="FckHtmlEditorProvider" type="DotNetNuke.HtmlEditor.FckHtmlEditorProvider.FckHtmlEditorProvider, DotNetNuke.FckHtmlEditorProvider" providerPath="~/Providers/HtmlEditorProviders/Fck/" CustomConfigurationPath="~/Providers/HtmlEditorProviders/Fck/custom/FCKConfig.js" EnhancedSecurityDefault="false" SecureConfigurationPath="~/Providers/HtmlEditorProviders/Fck/custom/FCKConfigSecure.js" ImageGalleryPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" ImageUploadPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" ImageAllowedFileTypes="gif,png,bmp,jpg" FlashGalleryPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" FlashUploadPath="~/Providers/HtmlEditorProviders/Fck/fckimagegallery.aspx" FlashAllowedFileTypes="fla,swf" LinksGalleryPath="~/Providers/HtmlEditorProviders/Fck/fcklinkgallery.aspx" DynamicStylesGeneratorPath="~/Providers/HtmlEditorProviders/Fck/FCKStyles.aspx" DynamicStylesCaseSensitive="true" DynamicStylesGeneratorFilter="controlpanel|filemanager|mainmenu|wizard" StaticStylesFile="~/Providers/HtmlEditorProviders/Fck/FCKeditor/fckstyles.xml" StylesDefaultMode="Static" DynamicCSSGeneratorPath="~/Providers/HtmlEditorProviders/Fck/FCKCSS.aspx" StaticCSSFile="~/Providers/HtmlEditorProviders/Fck/FCKeditor/editor/css/fck_editorarea.css" CSSDefaultMode="static" spellCheck="ieSpell" AvailableToolbarSkins="Office2003,Silver" DefaultToolbarSkin="Office2003" AvailableToolBarSets="DNNDefault,Default,NoGallery,Basic" DefaultToolbarSet="DNNDefault" DefaultImageGallerySkin="Default" DefaultFlashGallerySkin="Default" DefaultLinksGallerySkin="Default" FCKDebugMode="false" UseFCKSource="false" OptionsOpenMode="ShowModalDialog" CustomOptionsDialog="Admin" /> 
            <add name="RadEditorProvider" type="Telerik.DNN.Providers.RadEditorProvider" providerPath="~/DesktopModules/TelerikWebUI" Language="nl-NL" AutoCreatePaths="true" CssFiles="*PortalRoot*/RadEditor.css" OnClientLoad="OnRadEditorLoad" /> 
          </providers> 
        </htmlEditor> 

    On the page where my Editor is loaded i added this javascript.
    The script adds a class name to all html anchors. In my case i added the className "radAnchor"
    In DotNetNuke you can add this script in your skin. I made a admin skin so that the script is only applied on the admin pages.

    <script type="text/javascript">   
        function OnRadEditorLoad(editor, args)   
        {   
            editor.get_filtersManager().add(new MyFilter());   
            var links = editor.get_document().getElementsByTagName("A");   
            for (var i=0; i< links.length; i++)   
             {   
                var link = links[i];                               
                if (link && link.getAttribute("NAME"))   
                 {                                                   
                            link.className = "radAnchor"; 
                }   
              }   
        }   
        MyFilter = function()   
         {   
            MyFilter.initializeBase(this);   
            this.set_isDom(false);   
            this.set_enabled(true);   
            this.set_name("RadEditor filter");   
            this.set_description("RadEditor filter description");   
        }   
         MyFilter.prototype =   
         {   
            getHtmlContent : function(content)   
            {   
                var oDiv = document.createElement("DIV");   
                oDiv.innerHTML = content;   
                var links = oDiv.getElementsByTagName("A");   
                for (var i=0; i< links.length; i++)   
                 {   
                     var link = links[i];                               
                        if (link && link.getAttribute("NAME"))   
                        {                                                   
                            link.className = "";   
                         }   
                }   
                return oDiv.innerHTML;   
            },   
     
            getDesignContent : function(content)   
             {   
                var oDiv = document.createElement("DIV");   
                oDiv.innerHTML = content;   
                var links = oDiv.getElementsByTagName("A");   
                for (var i=0; i< links.length; i++)   
                {   
                    var link = links[i];                               
                        if (link && link.getAttribute("NAME"))   
                        {                                                   
                            link.className = "radAnchor";   
                        }   
                }   
                return oDiv.innerHTML;   
            }   
        }   
        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);   
    </script> 

    Use css to style the anchor in the design view. I used a custom css file for my Editor.

    .radAnchor { display: block; float: left; width: 16px; height: 16px; background: transparent url(/Portals/0/Skins/Malle/Images/Icons/anchor.png) no-repeat; }  
     

    Now you should see the anchors in the editor. U can use the Link Manager Dialog to add a anchor to the page. But because this isn't user friendly i wanted to have a custom button that shows a dialog to add and edit the anchor.

    So this is the second step. Adding a Custom Dialog to add and edit anchors.

    I've created a aspx file that is the content of the  "Insert anchor" dialog.

        <fieldset style="width: 214px; height: 192px"> 
            Name: <input type="text" id="anchorName"><br/> 
            <input type="button" onclick="javascript:insertAnchor();" value="Insert Anchor"/> 
            <input type="button" onclick="javascript:getRadWindow().close();" value="Cancel"/> 
        </fieldset> 
     
        <script type="text/javascript"> 
        if (window.attachEvent) 
        { 
            window.attachEvent("onload", initDialog); 
        } 
        else if (window.addEventListener) 
        { 
            window.addEventListener("load", initDialog, false); 
        } 
     
        var anchorName = document.getElementById("anchorName"); 
     
        var workLink = null; 
             
        function getRadWindow() 
        { 
               if (window.radWindow) 
            { 
                return window.radWindow; 
            } 
            if (window.frameElement && window.frameElement.radWindow) 
            { 
                return window.frameElement.radWindow; 
            } 
            return null; 
        } 
     
        function initDialog() 
        { 
           var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page 
                  
           anchorName.value = clientParameters.name; 
           workLink = clientParameters; 
        } 
     
        function insertAnchor() //fires when the Insert Link button is clicked 
        { 
           //create an object and set some custom properties to it       
           workLink.anchorName = anchorName.value; 
                  
           getRadWindow().close(workLink); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page. 
        } 
    </script> 


    This file (InsertAnchor.aspx) is located in the folder of your editor. In my case this is /DesktopModules/TelerikWebUI/RadEditorProvider.

    Next step is adding a custom button in the toolbar. I use the ToolsFile.xml so i added this line of code:

    <tool name="InsertAnchor" /> 

    Now we need to connect the new button to the Custom Dialog. This by adding some javascript. You can add this at the same place as the script to show the anchors.

    Telerik.Web.UI.Editor.CommandList["InsertAnchor"] = function(commandName, editor, args) 
    { 
        var elem = editor.getSelectedElement(); //returns the selected element. 
           if (elem.tagName == "A") 
           { 
                editor.selectElement(elem); 
                argument = elem; 
           } 
           else 
           { 
              var content = editor.getSelectionHtml();  
              var link = editor.get_document().createElement("A"); 
              link.innerHTML = content;           
              argument = link; 
           } 
           var myCallbackFunction = function(sender, args) 
           { 
               editor.pasteHtml(String.format("<a class=\"radAnchor\" name=\"{0}\"></a>{1}", args.anchorName, args.innerHTML)) 
           } 
           editor.showExternalDialog( 
            '/DesktopModules/TelerikWebUI/RadEditorProvider/InsertAnchor.aspx', 
            argument, 
            270, 
            300, 
            myCallbackFunction, 
             null, 
             'Insert Anchor', 
            true, 
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, 
            false, 
            false); 
    }; 

    So besides skinning the button, it should work now.
    To skin the button add this peace of code to your css file.

    .rade_toolbar .InsertAnchor 
    { 
        background: transparent url(/Portals/0/Skins/Malle/Images/Icons/anchor.png) no-repeat center center; 
    } 

    The icon i used is the anchor.png of the famfamfam silk library.

    Kind regards,
    Dieter


  3. DF60784D-55A5-4263-9F10-A12FA48C9ADC
    DF60784D-55A5-4263-9F10-A12FA48C9ADC avatar
    14477 posts
    Member since:
    Apr 2022

    Posted 05 Mar 2009 Link to this post

    Hi Dieter,

    Thank you for posting this interesting solution in the code library - it will surely be helpful for other members of the Telerik community. We really appreciate your involvement and I added 2000 Telerik points to your account as a token of gratitude.

    I just want to add that the first part of the demo is based on the following KB article: Making named anchors visible in editing area.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.