Implementing external Table of Contents where the links point to specific sections within RadEditor

RELATED TO:

Article information

Article relates to

RadEditor for ASP.NET AJAX 

Created by

Rumen Zhekov


HOW-TO
Implement external Table of Contents where the links point to specific sections within RadEditor


SOLUTION
The code below shows how to implement exterior links (the table of contents placed outside the editor) that focus on a specific section within the content area of RadEditor:

<div onclick="return NavigateToAnchor(event);">  
    <ol> 
        <li><a href="#SingleFile">Single File</a> </li> 
        <li><a href="#FullKeyboard">Full keyboard</a> </li> 
        <li><a href="#XHTML">XHTML enabled output</a> </li> 
    </ol> 
</div> 
<br /> 
<telerik:radeditor id="RadEditor1" runat="server">  
<Content> 
    RadEditor is the successor of the well known industry standard Editor for ASP.NET.  
    The tight integration with ASP.NET AJAX and powerful new capabilities of the “Prometheus”  
    suite features the new WYSIWYG Editor as a flexible and lightweight component, turning  
    to be the fastest loading Web Editor. Among the hottest features are:  
    <br> 
    <br> 
    <ul> 
        <li><a name="SingleFile">Single-file</a> 
        , drag-and-drop deployment  
        <li><em>Built on top of ASP.NET AJAX<br> <br><br><br><br><br><br><br>
        </em> 
        <li><em>Unmatched loading speed with new semantic rendering </em> 
        <li><a name="FullKeyboard">Full keyboard</a> 
        accessibility  
        <li><em>Flexible Skinning mechanism</em><br><br><br><br><br><br><br><br><br>  
            <li><em>Simplified and intuitive toolbar configuration</em> 
        <li><a name="XHTML">Out-of-the-box XHTML-enabled</a> output<br><br><br><br><br><br><br><br><br><br><br><br> 
        </li> 
    </ul> 
</Content> 
</telerik:radeditor> 
 
<script type="text/javascript">        
    function NavigateToAnchor(e)        
    {        
        var link = e.target ? e.target : e.srcElement;        
        if (link.tagName != "A") return;                
        var href = link.href;        
        var anchorName = href.substr(href.lastIndexOf("#") + 1);        
        var editor = $find("<%=RadEditor1.ClientID%>");   //get a reference to RadEditor      
        var oDocument = editor.get_document();   
        var as = oDocument.getElementsByTagName("A");  //get a reference to the anchors in the content area      
                
        for (var i=0; i < as.length; i++)        
        {        
            var a = as[i];        
            if (a.getAttribute("name") == anchorName)        
            {                                
                a.scrollIntoView(true);        
            }        
        }        
        //Cancel the event        
        return false;        
    }        
</script> 

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.