Table of Contents plugin

发布于 2019-05-06 字数2564 浏览 312 评论 0

toc plugin will generate basic Table of Contents and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.

Type: String

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "toc",
  toolbar: "toc",
  menubar: "insert"
});

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

Internally plugin doesn’t apply any inline styles. Basic formatting can be added via Boilerplate Content CSS, that can be customised to your needs.

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
	border: 1px solid gray;
}

.mce-toc h2 {
	margin: 4px;
}

.mce-toc li {
	list-style-type: none;
}

Options

toc_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 behaviour by setting toc_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
tinymce.init({
  selector: "textarea",
  plugins: "toc",
  toolbar: "toc",
  toc_depth: 3
});

toc_header

Table of contents has a header and by default it will be marked up with H2 tag. With toc_header option you can change it to some other tag.

Type: String

Default Value: H2

Example
tinymce.init({
  selector: "textarea",
  plugins: "toc",
  toolbar: "toc",
  toc_header: "div" // case doesn't matter
});

toc_class

With toc_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
tinymce.init({
  selector: "textarea",
  plugins: "toc",
  toolbar: "toc",
  toc_class: "our-toc"
});

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!