Table of Contents plugin

This plugin is only available for paid TinyMCE subscriptions.

The Table of Contents plugin generates a basic table of contents (ToC) and inserts it into the editor at the current cursor position. ToC entries are generated from header elements (h1 – h6 elements) in the content.

In previous versions of TinyMCE the Table of Contents plugin was provided as an open source plugin also called Table of Contents.

Interactive Example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="tableofcontents">
  <div class="mce-toc">
    <h2>Table of Contents</h2>
    <ul>
      <li><a href="#intro">Table of Contents plugin demo</a>
        <ul>
          <li><a href="#how-to-use-the-demo">How to use the demo?</a></li>
        </ul>
      </li>
      <li><a href="#got-questions-or-need-help">Got questions or need help?</a></li>
      <li><a href="#found-a-bug">Found a bug?</a></li>
      <li><a href="#conclusion">Finally...</a></li>
    </ul>
  </div>

  <h2 id="intro">Table of Contents plugin demo</h2>
  <p>
    The Table of Contents plugin provides the ability to automatically create a table of contents based on the headings in your content.
  </p>

  <h3 id="how-to-use-the-demo">How to use the demo?</h3>
  <p>
    To update the table of contents already in this demo, insert some new headings, select the table of contents at the top of the page and then click the
    update button in the context toolbar that appears.
  </p>
  <p>
    You can also insert a new table of contents anywhere in the content by selecting where you want the table of contents to be inserted and then either click
    the table of contents toolbar button or by selecting <code>Insert</code> -> <code>Table of contents</code>.
  </p>

  <h2 id="got-questions-or-need-help">Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2 id="found-a-bug">Found a bug?</h2>
  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2 id="conclusion">Finally...</h2>
  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
tinymce.init({
  selector: 'textarea#tableofcontents',
  height: 600,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'tableofcontents', 'wordcount'
  ],
  toolbar: 'tableofcontents | undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Basic setup

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

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 does not apply inline styles. Basic formatting can be added via Boilerplate Content CSS, that can be customized to your needs.

.mce-toc {
  border: 1px solid gray;
}

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

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

Options

tableofcontents_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 tableofcontents_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 tableofcontents_depth

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

tableofcontents_header

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

Type: String

Default value: 'h2'

Example: using tableofcontents_header

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'tableofcontents',
  toolbar: 'tableofcontents',
  tableofcontents_header: 'div' // case doesn't matter
});

tableofcontents_class

With tableofcontents_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 tableofcontents_class

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

tableofcontents_includeheader

By default, Tables of Contents include a header string, Table of Contents.

The tableofcontents_includeheader option allows this header to be turned off.

Type: Boolean

Default value: 'true'

Possible values: 'true', 'false'

Example: using tableofcontents_includeheader to turn the Table of Contents header string off

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_includeheader: false,
});

tableofcontents_orderedlist

By default, Tables of Contents are rendered as unordered lists.

The tableofcontents_orderedlist option allows Tables of Contents to be rendered as an ordered list.

When the tableofcontents_orderedlist option is set to true, Tables of Contents are rendered as numeric ordered lists.

To customise the type of ordered list, add the xref:tableofcontents_orderedlist_type[tableofcontents_orderedlist_type] option to the configuration.

Type: Boolean

Default value: 'false'

Possible values: 'true', 'false'

Example: using tableofcontents_orderedlist to switch from an unordered to an ordered list

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_orderedlist: true,
});

If the tableofcontents_orderedlist: true option is set and no tableofcontents_orderedlist_type option is set, the Table of Contents plugin defaults to using a numeric ordered list.

This is equivalent to setting tableofcontents_orderedlist_type: '1'.

tableofcontents_orderedlist_type

By default, Tables of Contents are rendered as unordered lists.

Setting the option tableofcontents_orderedlist: true, switches this to a numeric ordered list.

And setting the tableofcontents_orderedlist_type to one of its available values switches the rendered Table of Contents to the specified ordered list type.

Type: String

Possible values: '1', 'A', 'a', 'I', 'i'

Default value: '1'

The possible values set the type attribute of the ordered list, <ol> as follows:

Value Ordered list type

'1'

A list sorted by Arabic/Hindu numerals.

This is the default.

'A'

A list sorted alphabetically by capital letter.

'a'

A list sorted alphabetically by lowercase letter.

'I'

A list sorted by uppercase Roman numerals.

'i'

A list sorted by lowercase Roman numerals.

Example: using tableofcontents_orderedlist to render a Table of Contents as uppercase Roman numerals

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_orderedlist: true, // required to enable tableofcontents_orderedlist_type configuration.
  tableofcontents_orderedlist_type: 'I',
});

The tableofcontents_orderedlist: true option must be present in a TinyMCE configuration for whatever tableofcontents_orderedlist_type setting to come into effect.

Toolbar buttons

The Table of Contents plugin provides the following toolbar buttons:

Toolbar button identifier Description

tableofcontents

Inserts a Table of Contents into the editor.

tableofcontentsupdate

Updates the Table of Contents block element.

These toolbar buttons can be added to the editor using:

The Table of Contents plugin provides the following menu items:

Menu item identifier Default Menu Location Description

tableofcontents

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 TinyMCE 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');