中文文档

此页更新时间：2019-05-02 22:46

此页英文文档：https://www.tiny.cloud/docs/plugins/toc/

该功能类似word的目录功能，即根据内容区的标题标签（通常为h1~h3），在当前光标位置生成可手动更新的目录结构。

照例先来个例子：

tinymce.init({
    selector: '#tinydemo',
    plugins: "toc",
    toolbar: "toc",
});

<h1>一级标题1</h1> <h2>二级标题1</h2> <p>普通段落</p> <h2>二级标题2</h2> <p>普通段落</p> <h1>一级标题2</h1> <p>普通段落</p>

该插件生成的目录具有一个简单的html结构，即最外层是由一个类名mce-toc的div包裹，提供一个h2标题。目录由ul嵌套生成并加上了导航链接，即#开头的锚点。

于是我们可以自己写CSS，使用.mce-toc{}来定义该目录的样式。

额外选项

toc_depth 目录深度

默认搜索3层，即h1、h2、h3。但如果你写了9，则搜索范围会变为h1~h9。

取值：Number 1-9

默认：3

toc_depth: 3

toc_header 目录标题标签

取值：String 一个html标签名

默认：H2

toc_header: 'div'

toc_class 最外层div的类名

如果默认值和你现有的系统有冲突或你想定义不同的目录样式，这个参数能帮到你。

取值：String 一个class名

默认：mce-toc

toc_class: 'my-class'

下一节：visualblocks 显示块元素范围