目录

此插件仅适用于 付费 TinyMCE 订阅。

Table of Contents 插件会生成一个基本的目录 (ToC) 并将其插入到编辑器中当前光标所在的位置。目录条目是从内容中的标题元素 (h1 – h6 元素) 生成的。

在以前的 TinyMCE 版本中，Table of Contents 插件是作为开源插件提供的，也称为 Table of Contents。

交互式示例

HTML

<textarea id="tableofcontents">
  <div class="mce-toc">
    <h2>目录</h2>
    <ul>
      <li><a href="#intro">Table of Contents 插件演示</a>
        <ul>
          <li><a href="#how-to-use-the-demo">如何使用演示？</a></li>
        </ul>
      </li>
      <li><a href="#got-questions-or-need-help">有问题或需要帮助？</a></li>
      <li><a href="#found-a-bug">发现了一个 bug？</a></li>
      <li><a href="#conclusion">最后...</a></li>
    </ul>
  </div>

  <h2 id="intro">Table of Contents 插件演示</h2>
  <p>
    Table of Contents 插件可以根据您的内容标题自动创建目录。
  </p>

  <h3 id="how-to-use-the-demo">如何使用演示？</h3>
  <p>
    要更新此演示中已有的目录，请插入一些新标题，选择页面顶部的目录，然后单击出现的上下文工具栏中的
    更新按钮。
  </p>
  <p>
    您还可以通过选择目录要插入的位置来在内容中的任何位置插入新目录，然后单击
    目录工具栏按钮或选择 <code>插入</code> -> <code>目录</code>。
  </p>

  <h2 id="got-questions-or-need-help">有问题或需要帮助？</h2>
  <ul>
    <li>我们的 <a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a> 是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？请尝试 Stack Overflow 上的 <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> 标签</a>。</li>
    <li>作为 <a href="https://www.tiny.cloud/pricing">TinyMCE 高级计划</a> 的一部分，我们还提供企业级支持。</li>
  </ul>

  <h2 id="found-a-bug">发现了一个 bug？</h2>
  <p>
    如果您认为您发现了一个 bug，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建一个 issue，向开发人员报告。
  </p>

  <h2 id="conclusion">最后...</h2>
  <p>
    您的应用程序需要文件上传功能吗？考虑将 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 结合使用，以获得快速、现代的上传体验。
  </p>
  <p>
    感谢您支持 TinyMCE！我们希望它能帮助您和您的用户创建出色的内容。<br>来自 TinyMCE 团队的最诚挚的问候。
  </p>
</textarea>

JS

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 }'
});

基本设置

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tableofcontents',
  toolbar: 'tableofcontents',
});

有关使用模块打包器打包此插件的信息，请参阅 打包 TinyMCE - 概述。

目录将具有一个简单的 HTML 结构——一个包装 div 元素、一个带有可编辑标题的页眉和一个带有导航链接的无序嵌套列表。嵌套深度是可自定义的。

插件内部不应用内联样式。基本格式可以通过 样板内容 CSS 添加，可以根据您的需要进行自定义。

.mce-toc {
  border: 1px solid gray;
}

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

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

选项

tableofcontents_depth

默认情况下，内容中的标题将仅被检查到三个级别，因此 - H1 到 H3。但是可以通过将 tableofcontents_depth 设置为 1-9 范围内的任意数字来更改此行为，从而匹配从 H1 开始一直到 H9 的所有标题。

类型： Number

默认值： 3

示例：使用 tableofcontents_depth

tinymce.init({
  selector: 'textarea',
  plugins: 'tableofcontents',
  toolbar: 'tableofcontents',
  tableofcontents_depth: 3
});

tableofcontents_header

目录包含一个标题，默认情况下会使用 H2 标签进行标记。通过 tableofcontents_header 选项，您可以将其更改为其他标签。

类型：String

默认值：'h2'

示例：使用 tableofcontents_header

tinymce.init({
  selector: 'textarea', // 根据您的HTML更改此值
  plugins: 'tableofcontents',
  toolbar: 'tableofcontents',
  tableofcontents_header: 'div' // 大小写无关紧要
});

tableofcontents_class

通过 tableofcontents_class 可以更改分配给包装器 div 的类名。请注意，您需要相应地修改 Boilerplate Content CSS。

类型：String

默认值：'mce-toc'

示例：使用 tableofcontents_class

tinymce.init({
  selector: 'textarea',
  plugins: 'tableofcontents',
  toolbar: 'tableofcontents',
  tableofcontents_class: 'our-toc'
});

tableofcontents_includeheader

默认情况下，目录包含一个标题字符串，Table of Contents。

通过 tableofcontents_includeheader 选项可以关闭此标题。

类型：Boolean

默认值：'true'

可能的值：'true'，'false'

示例：使用 tableofcontents_includeheader 关闭目录标题字符串

tinymce.init({
  selector: "textarea", // 根据您的HTML更改此值
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_includeheader: false,
});

tableofcontents_orderedlist

默认情况下，目录呈现为无序列表。

通过 tableofcontents_orderedlist 选项，可以将目录呈现为有序列表。

当 tableofcontents_orderedlist 选项设置为 true 时，目录呈现为数字有序列表。

要自定义有序列表的类型，请在配置中添加 tableofcontents_orderedlist_type 选项。

类型：Boolean

默认值：'false'

可能的值：'true'，'false'

示例：使用 tableofcontents_orderedlist 从无序列表切换到有序列表

tinymce.init({
  selector: "textarea", // 根据您的HTML更改此值
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_orderedlist: true,
});

如果设置了 tableofcontents_orderedlist: true 选项且未设置 tableofcontents_orderedlist_type 选项，则 Table of Contents 插件默认使用数字有序列表。

这等同于设置 tableofcontents_orderedlist_type: '1'。

tableofcontents_orderedlist_type

默认情况下，目录呈现为无序列表。

设置 tableofcontents_orderedlist: true 选项会将其切换为数字有序列表。

并且将 tableofcontents_orderedlist_type 设置为其可用值之一会将呈现的目录切换为指定的 有序列表类型。

类型：String

默认值：'1'

可能的值：'1'，'A'，'a'，'I'，'i'

可能的值按如下方式设置有序列表 <ol> 的类型属性：

示例：使用 tableofcontents_orderedlist 将目录呈现为大写罗马数字

tinymce.init({
  selector: "textarea", // 根据您的HTML更改此值
  plugins: "tableofcontents",
  toolbar: "tableofcontents",
  tableofcontents_orderedlist: true, // 需要启用 tableofcontents_orderedlist_type 配置。
  tableofcontents_orderedlist_type: 'I',
});

无论何种 tableofcontents_orderedlist_type 设置要生效，TinyMCE 配置中都必须包含 tableofcontents_orderedlist: true 选项。

工具栏按钮

目录插件提供以下工具栏按钮：

可以通过以下方式将这些工具栏按钮添加到编辑器中：

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

目录插件提供以下菜单项：

可以通过以下方式将这些菜单项添加到编辑器中：

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮。

命令

目录插件提供以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');