New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Making named anchors visible in editing area

HOW-TO

**Make named anchors visible in editing area

DESCRIPTION

By default, the anchors are invisible in the content area and it is useful to display them to prevent users from accidentally deleting a named anchor. The solution below demonstrates how to highlight the named anchors in Design mode using a content filter.

SOLUTION

When the content is loaded initially in the editor, the code parses the anchors and sets a background-color css property to all of them and highlights them in the content area. When the user switches to Html mode or submits the content the background-color property is removed.

<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">  
<Content>  
    SAMLE CONTENT <BR>SAMPLE CONTENT <A NAME="ANCHOR1">Anchor 1</A><BR><BR>SAMPLE CONTENT<BR><BR>  
    <A HREF="HTTP://ABV.BG">SAMPLE</A>  
    <A HREF="#ANCHOR1">CONTENT</A><BR>  
    <A HREF="HTTP://WWW.TELERIK.COM">WWW.TELERIK.COM</A> <BR>  
    <A NAME="ANCHOR2">Anchor 2</A>  
</Content>  
</telerik:radeditor>  
<script type="text/javascript">  
    function OnClientLoad(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.style.backgroundColor = "yellow"; //here you can set per your choice backgroundImage or className attribute  
           }  
       }  
    }  
    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.style.backgroundColor = "";  
               }  
            }  
            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.style.backgroundColor = "yellow"; //here you can set per your choice backgroundImage or className attribute  
               }  
            }  
            return oDiv.innerHTML;  
       }  
    }  
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);  
    </script> 
In this article
Not finding the help you need? Improve this article