Table of Contents plugin

TinyMCE 5.10 will include the final release of the Table of Contents plugin (toc) as an open source plugin. The Table of Contents plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.

The toc plugin will generate basic Table of Contents and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'toc',
  toolbar: 'toc',
  menubar: 'insert'
});

The Table of Contents will have a simple HTML structure - a wrapper div element, a header with editable title and unordered nested list with navigation links. Nesting depth is customizable.

Internally plugin doesn’t apply any inline styles. Basic formatting can be added via Boilerplate Content CSS, that can be customized to your needs.

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}

Options

toc_depth

By default, headers in the content will be inspected only three levels deep, so - H1 through H3. But it is possible to change this behavior by setting toc_depth to any number in 1-9 range, therefore matching all the headers beginning with H1 and all the way down to H9.

Type: Number

Default Value: 3

Example: Using toc_depth

tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_depth: 3
});

toc_header

Table of contents has a header and by default it will be marked up with H2 tag. With the toc_header option you can change it to some other tag.

Type: String

Default Value: H2

Example: Using toc_header

tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_header: 'div' // case doesn't matter
});

toc_class

With toc_class you can change the class name that gets assigned to the wrapper div. Please note that you will have to alter Boilerplate Content CSS accordingly.

Type: String

Default Value: mce-toc

Example: Using toc_class

tinymce.init({
  selector: 'textarea',
  plugins: 'toc',
  toolbar: 'toc',
  toc_class: 'our-toc'
});