Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Table of Contents plugin

Insert a simple Table of Contents into TinyMCE editor

Contribute to this page
+ toolbar button + menu item

Important: 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'
});

Toolbar buttons

The Table of Contents plugin provides the following toolbar buttons:

Toolbar button identifier Description
toc Inserts a Table of Contents into the editor.
tocupdate Updates the Table of Contents block element.

These toolbar buttons can be added to the editor using:

Menu items

The Table of Contents plugin provides the following menu items:

Menu item identifier Default Menu Location Description
toc Insert Inserts a Table of Contents into the editor.

These menu items can be added to the editor using:

Commands

The Table of Contents plugin provides the following JavaScript commands.

Command Description
mceInsertToc Inserts a Table of Contents into the editor.
mceUpdateToc Updates an existing Table of Contents.

Examples

tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.