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
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'
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'
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 This is equivalent to setting |
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 |
---|---|
|
A list sorted by Arabic/Hindu numerals. This is the default. |
|
A list sorted alphabetically by capital letter. |
|
A list sorted alphabetically by lowercase letter. |
|
A list sorted by uppercase Roman numerals. |
|
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 |
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');