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

Getting started with TinyMCE Table of Contents

Creating a Tiny Cloud account

Try the Table of Contents plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.

Get TinyMCE Table of Contents

The Table of Contents plugin is included in the following Tiny Cloud plans:

A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.

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 doesn’t apply any 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',
  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'
});

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