TinyMCE - How to configure the Table Of Content option to use H1 to H9

[Johan van den H]

We are using TinyMCE (without any customization) and have enabled the TOC icon so knowledge creators can make a Table Of Contents based on the headers used in their knowledge article.

However, we are limited to use only heading 3 as heading 1 and 2 are way too big to use.

From the TinyMCE documentation online:
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

Can this tableofcontents_depth setting be changed in the TinyMCE editor in ServiceNow?

[Johan van den H]

I also send this question to ServiceNow support and they answered:

As you have confirmed in the description of this case, the contents can only be generated from Heading 1 to Heading 3:
https://docs.servicenow.com/bundle/washingtondc-servicenow-platform/page/product/knowledge-managemen...

I have further reviewed the possibility of modifying this to cater for different headers.

Currently, this is not configurable within the platform.

Given this is working as intended, and given there is no other alternative OOB method to configure this, you may wish to raise an idea request to propose this to our development team.

I will raise this as an idea.

[Ken_Tryon]

This doesn't address your question directly but may accomplish what you need:

I use the source code view to insert a CSS style block at the top of the article, which formats headings, etc. as desired. This removes the need for most local formatting and ensures articles look consistent. The MCE auto TOC is enclosed in a div with a class of mce-toc and can be formatted with using that as a CSS specifier.

<div class="mce-toc">

This the relevant CSS for the TinyMCE auto TOC--modify as needed. I used to set the text and background colors but removed those because they break dark mode. The relevant code is commented out below.

<style>
        /* style overrides for TOC generated by MCE editor in ServiceNow */
	/* MCE wraps TOC in a div with class mce-toc */
	.mce-toc {
		/* styles for TOC div block */
		margin: 0.5em 0 1.5em 0;
		padding: 0.25em 2em 0.5em 2em;
		/* set thin border for dark mode compatibility */
		border: thin solid gray;
		/* set background if desired--note that this will not change with light/dark mode*/
                /*background: #C0C0C0; */
		/* Title of TOC is an h2 heading */
		h2 {
			margin: 1em 0 0.5em 0;
			line-height: 1.3; 
			break-after: avoid;
			border-bottom: 1px solid #404040;
			font-size: 150%; 
			font-weight: bold; 
		}	
		/* body of TOC is an unordered list composed entirely of hyperlinks */
		li {
			margin: 0 0 0 0;
			line-height: 1.3;
			font-size: 12pt;
		}
		/* color: is set here because all text is hyperlinks */
		a:link, a:visited, a:hover, a:active {
			text-decoration: none;
		/* color setting removed and left at default for dark mode compatibility */
		/* color: #000000; */
		}
 
		/* set hover formatting to indicate active link */
		a:hover {
			text-decoration: underline;
		}
	}
	</style>

See also this article on setting local TOC formatting: Reader • Docs | ServiceNow