Table of Contents

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/toc/toc.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['toc']
});

Options

• depth (number)
  • default 3
  • Maximum heading level included (1–6).
• title (string | false)
  • default false
  • Optional title shown above the ToC list.
• target (string | false)
  • default false
  • CSS selector of a container where the ToC is inserted. false prepends the ToC to the editor.
• toolbar (boolean)
  • default false
  • When true, also adds the button to the main toolbar.
• topLevel (boolean)
  • default true
  • When true, only top-level heading blocks are included.
• icon (string)
  • SVG icon HTML for the addbar (and toolbar) button.

Redactor('#entry', {
    plugins: ['toc'],
    toc: {
        depth: 4,
        title: 'Contents',
        toolbar: true
    }
});

Language strings

en: {
    toc: {
        'insert-toc': 'Insert ToC'
    }
}

Events

This plugin does not emit events.

API

generate

Builds and inserts (or replaces) the table of contents from current headings.

app.toc.generate();

update

Refreshes an existing ToC block to match current headings. Called automatically on editor:change.

app.toc.update();