Account
Menu
Redactor

Table of contents

The Table of Contents (ToC) Plugin automatically generates a structured list of headings within a document, providing easy navigation for users. It scans the content for heading elements (e.g., <h1>, <h2>, <h3>), organizes them hierarchically, and inserts a clickable table of contents at the beginning of the text.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/tableofcontents/tableofcontents.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['tableofcontents']
        });
        </script>
    </body>
</html>

Usage

The plugin has several options:

depth

By default, the plugin creates the heading list to a depth of 3, i.e. including h3 headings. You can change the depth, for example by specifying 4, so the plugin will capture h4 tags now. 


Redactor('#entry', {
    plugins: ['tableofcontents'],
    tableofcontents: {
        depth: 4
    }
});

title

You can specify a title to be inserted along with the heading list. 


Redactor('#entry', {
    plugins: ['tableofcontents'],
    tableofcontents: {
        title: '<h4>Table of contents</h4>'
    }
});

insertInto

You can specify the target for the plugin by setting the insertInto to a string with the ID of the element where the Table of contents will be inserted. For example, it can be any element on the page outside the editor. 


Redactor('#entry', {
    plugins: ['tableofcontents'],
    tableofcontents: {
        insertInto: '#my-toc'
    }
});

toolbarButton

By default, the plugin shows the Table of contents button in the Addbar menu (plus button). You can specify a setting to add the button to the main toolbar as well. 


Redactor('#entry', {
    plugins: ['tableofcontents'],
    tableofcontents: {
        toolbarButton: true
    }
});

CSS

By default, Table of content has no styles in the editor. You can add your own CSS for it, like this: 


<style>
.rx-toc {
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--rx-border-divider);
    border-radius: 6px;
}
</style>