Table of contents

Home/CKEditor 5/Features

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.

The plant kingdom

The plant kingdom is a diverse group of organisms that includes both tiny algae and giant sequoias. Despite this diversity, all plants have a few things in common.

Plants are organisms that:

Have bodies made of multiple cells.
Can synthesize food in a process called photosynthesis.
Usually can’t move.
Have cells with walls made of cellulose.

Plants can be divided into two groups: those that make seeds and those that don’t.

Seedless plants

Plants in this group, called cryptogams, do not produce seeds.

Freshwater and marine algae

Green algae do not form true roots, stems, or leaves. This group gave rise to all land plants hundreds of millions of years ago.

Mosses and liverworts

Mosses and liverworts are the oldest land plants. They have a stem and structures resembling leaves and roots. Unlike other land plants, they lack a vascular system (a special tissue to transport water and nutrients).

Ferns and horsetails

Ferns and horsetails have distinct stems, leaves, and roots. They are the oldest vascular plants. This means that, unlike mosses and liverworts, they do have a vascular system that transports water and nutrients through their bodies.

Seed-producing plants

Plants in this group, called phanerogams, can produce seeds.

Non-flowering plants

Members of this group, called gymnosperms, are the first vascular plants to produce seeds. The seeds, unlike in flowering plants, don’t have an outer covering.

Conifers

Most members of this group are evergreen trees and shrubs. They are known for their needles (specialized leaves) and cones (where the seeds are kept).

Ginkgos and cycads

Ginkgos and cycads are both very old plant groups. The only surviving ginkgo species is the ginkgo tree (Ginkgo biloba). Cycads resemble palm trees, but the two are not related. The latter belong to flowering plants.

Flowering plants

When you hear the word ‘plant’, you likely picture a member of this group. Called angiosperms, they form the most diverse and abundant division of the plant kingdom. Plants in this group can make flowers and fruits that enclose seeds.

# 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 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.

# Activating the feature

In order to use this premium feature, you need to activate it with proper credentials. Please refer to the License key and activation guide for details.

# Customization

The looks of the table of contents widget can be customized. For instance, the demo below incorporates the CSS counters API to change the look of the table of contents and all headings in the content. You can find the full customization code below the demo.

The plant kingdom

The plant kingdom is a diverse group of organisms that includes both tiny algae and giant sequoias. Despite this diversity, all plants have a few things in common.

Plants are organisms that:

Have bodies made of multiple cells.
Can synthesize food in a process called photosynthesis.
Usually can’t move.
Have cells with walls made of cellulose.

Plants can be divided into two groups: those that make seeds and those that don’t.

Seedless plants

Plants in this group, called cryptogams, do not produce seeds.

Freshwater and marine algae

Green algae do not form true roots, stems, or leaves. This group gave rise to all land plants hundreds of millions of years ago.

Mosses and liverworts

Ferns and horsetails

Seed-producing plants

Plants in this group, called phanerogams, can produce seeds.

Non-flowering plants

Members of this group, called gymnosperms, are the first vascular plants to produce seeds. The seeds, unlike in flowering plants, don’t have an outer covering.

Conifers

Most members of this group are evergreen trees and shrubs. They are known for their needles (specialized leaves) and cones (where the seeds are kept).

Ginkgos and cycads

Flowering plants

Demo styles customization code

.ck.ck-content {
    --heading-font-family: Georgia, Times, "Times New Roman", serif;
}

/* --------------- Common table of contents list styles ------------------ */
.ck.ck-content .table-of-contents > ol > li {
    font-weight: bold;
    font-variant: small-caps;
}

.ck.ck-content .table-of-contents > ol > li > ol > li {
    font-weight: normal;
    font-variant: normal;
}

.ck.ck-content .table-of-contents > ol > li > ol > li > ol > li {
    font-weight: normal;
    font-variant: normal;
}

/* ------------------- Table of contents counter styles ----------------- */
.ck.ck-content .table-of-contents ol {
    counter-reset: toc-item;
    margin: 0;
    padding: 0;
}

.ck.ck-content .table-of-contents > ol {
    padding: var(--ck-table-of-contents-padding);
}

.ck.ck-content .table-of-contents li {
    display: table;
    counter-increment: toc-item;
    font-family: var(--heading-font-family);
}

.ck.ck-content .table-of-contents li::before {
    content: counters(toc-item, ".") ". ";
    display: table-cell;
    padding-right: .5em;
    font-weight: bold;
}

.ck.ck-content .table-of-contents li li {
    margin: 0;
}

.ck.ck-content .table-of-contents li li::before {
    content: counters(toc-item, ".") " ";
}

/* ------------------- Table of contents link style ----------------- */

.ck.ck-content .table-of-contents li a {
    color: #0b7538;
}

/* ------------------ Heading and heading counter styles ------------------ */
.ck.ck-content {
    counter-reset: heading2;
}

.ck.ck-content h2,
.ck.ck-content h3,
.ck.ck-content h4,
.ck.ck-content h5 {
    font-family: var(--heading-font-family);
}

.ck.ck-content h2::before,
.ck.ck-content h3::before,
.ck.ck-content h4::before,
.ck.ck-content h5::before {
    font-weight: bold;
}

.ck.ck-content h2 {
    font-weight: bold;
    counter-reset: heading3;
    font-variant: small-caps;
}

.ck.ck-content h3 {
    counter-reset: headings4;
}

.ck.ck-content h4 {
    counter-reset: headings5;
}

.ck.ck-content h2::before {
    content: counter(heading2) ". ";
    counter-increment: heading2;
}

.ck.ck-content h3::before {
    content: counter(heading2) "." counter(heading3) ". ";
    counter-increment: heading3;
}

.ck.ck-content h4::before {
    content: counter(heading2) "." counter(heading3) "." counter(headings4) ". ";
    counter-increment: headings4;
}

.ck.ck-content h5::before {
    content: counter(heading2) "." counter(heading3) "." counter(headings4) "." counter(headings5) ". ";
    counter-increment: headings5;
}

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 by TableOfContentsCommand.

The command can be executed 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.

# Demo

The plant kingdom

Seedless plants

Freshwater and marine algae

Mosses and liverworts

Ferns and horsetails

Seed-producing plants

Non-flowering plants

Conifers

Ginkgos and cycads

Flowering plants

# Installation

# Activating the feature

# Customization

The plant kingdom

Seedless plants

Freshwater and marine algae

Mosses and liverworts

Ferns and horsetails

Seed-producing plants

Non-flowering plants

Conifers

Ginkgos and cycads

Flowering plants

# Related features

# Common API