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.
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
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'
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'
Toolbar buttons
The Table of Contents plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
|
Inserts a Table of Contents into the editor. |
|
Updates the Table of Contents block element. |
These toolbar buttons can be added to the editor using:
-
The
toolbar
configuration option. -
The
quickbars_insert_toolbar
configuration option.
Menu items
The Table of Contents plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
|
Insert |
Inserts a Table of Contents into the editor. |
These menu items can be added to the editor using:
-
The
menu
configuration option. -
The
contextmenu
configuration option.
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. |
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');