Table of contents
The table of contents feature lets you insert a widget with a list of headings (section titles) that reflects the structure of the document. The list stays up–to–date automatically as the user works on the document. Clicking a list item navigates the user to the corresponding document section.
This premium feature is a part of the Productivity Pack available only for customers with a commercial license. Contact us for more details.
You can also sign up for the CKEditor Premium Features 30-day free trial to test the feature.
# Demo
Create several headings in the editor and click the table of contents button
in the toolbar. Change the heading text or level to see the table of contents getting updated live.# Installation
This feature is enabled by default in the superbuild only.
To add the table of contents feature to your editor, install the @ckeditor/ckeditor5-document-outline
package:
npm install --save @ckeditor/ckeditor5-document-outline
Then add the TableOfContents
plugin to your plugin list.
import { TableOfContents } from '@ckeditor/ckeditor5-document-outline';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ TableOfContents, /* ... */ ],
// Provide the activation key (see explanation below).
licenseKey: 'your-license-key',
toolbar: [ 'tableOfContents', /* ... */ ]
// ...
} )
.then( /* ... */ )
.catch( /* ... */ );
By default, the table of contents feature takes care of managing the heading IDs and creating proper links with a dedicated href
attribute. The output data produced by this feature ensures that clicking a link in a table of contents will scroll to the corresponding heading in the content.
Read more about installing plugins.
# Activating the feature
To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.
# Related features
Here are some more CKEditor 5 features that can help you navigate the content of the editor:
- Document outline – Display the list of sections (headings) of the document next to the editor.
- Content minimap – Navigate the document using a miniature overview map placed next to the editor.
- Pagination – See the live preview of the document’s page breaks and quickly navigate between pages.
# Common API
The TableOfContents
plugin registers:
- The
'tableOfContents'
UI button component. - The
'insertTableOfContents'
command implemented byTableOfContentsCommand
.
You can execute the command using the editor.execute()
method:
// Insert the table of contents.
editor.execute( 'insertTableOfContents' );
We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.