---
title: "Table of Contents plugin"
description: "Insert a simple Table of Contents into the TinyMCE editor"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tableofcontents/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/tableofcontents/index.md"
version: "latest"
last_updated: "2026-06-15T05:48:02Z"
tokens: 2005
---
# Table of Contents plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
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.

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

## Interactive Example

**Example**

```js
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

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

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).
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](../editor-content-css/), that can be customized to your needs.

```css
.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`

```js
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`

```js
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](../editor-content-css/) accordingly.

**Type:** `String`

**Default value:** `'mce-toc'`

#### Example: using `tableofcontents_class`

```js
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

```js
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 customize the type of ordered list, add the [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

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

> **Note:** 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](https://html.spec.whatwg.org/dev/grouping-content.html#the-ol-element).

**Type:** `String`

**Default value:** `'1'`

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

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

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

> **Important:** 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 [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Table of Contents plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `tableofcontents` | Insert | Inserts a Table of Contents into the editor. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## 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
```js
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');
```