← 全部文档

折叠标题

折叠某个标题下的章节,让长文档变得清爽,再点击一次即可展开。折叠只改变编辑时显示的内容;保存的 HTML 始终包含每一个章节。

Installation 标题已折叠的编辑器,左侧页边有一个指向右边的蓝色箭头作为标记;Configuration 章节处于展开状态,其标题旁边有一个指向下方的灰色箭头
"Installation" 已折叠:它的两个段落和 "Requirements" 小节被隐藏了。鼠标指针位于 "Configuration" 上方,显示出用于折叠它的灰色箭头。

启用

该功能由 foldheadings.js 插件提供(也包含在 plugins/all_plugins.js 中)。加载它即可;它默认开启,没有工具栏按钮。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/foldheadings.js"></script>

<div id="editor">
<h2>Installation</h2>
<p>Copy the richtexteditor folder to your site and add two script tags.</p>
<p>Then create the editor on a div or a textarea.</p>
<h3>Requirements</h3>
<p>Any modern browser.</p>
<h2>Configuration</h2>
<p>Pass a config object as the second argument.</p>
</div>
<script>
var editor = new RichTextEditor("#editor");
</script>

使用方法

把鼠标悬停在标题(h1 到 h6)上,其左侧的页边会出现一个小箭头。点击箭头即可折叠。折叠的标题会保留一个指向右边的蓝色箭头;点击它即可展开。点击标题文字会像平常一样放置光标,而不会折叠。在触摸屏上,由于没有悬停,箭头会一直以淡色显示。

折叠会隐藏该标题之后、直到下一个同级或更高级别标题之前的所有块。因此折叠一个 h2 也会隐藏其中的 h3 章节;折叠一个 h3 则在下一个 h3 或 h2 处停止。如果光标位于即将被隐藏的块中,它会被移到该标题的末尾,因此光标永远不会停留在隐藏的文本中。

选项与 API

选项默认值作用
foldHeadingsEnabledtruefalse 会关闭点击折叠。下面的方法仍然可以使用。
  • editor.foldAtCaret() 折叠或展开光标所在的章节(光标所在的标题本身,或者其上方最近的标题)。如果没有标题,则返回 false。
  • editor.toggleHeadingFold(headingElement) 折叠或展开一个标题。
  • editor.unfoldAll() 展开所有章节。

加载了斜杠命令插件时,"/" 菜单中有 "Fold section" 和 "Unfold all" 两个条目,它们会调用这些方法,为键盘用户提供了一种折叠方式。

注意事项

  • 编辑时,折叠状态表现为两个 CSS 类:标题上的 rte-fold-collapsed 和被隐藏块上的 rte-fold-hidden。getHTMLCode()、getHTMLContent() 和 getJSON() 在调用期间会去掉它们,因此隐藏的章节也会被保存。折叠状态本身不会被保存:文档打开时总是处于展开状态。
  • 折叠过的元素在保存的 HTML 中会保留一个空的 class 属性:
    <h2 id="installation" class="">Installation</h2>
    <p class="">Copy the richtexteditor folder to your site and add two script tags.</p>
    这并无害处,但会出现在差异对比中。(id 来自编辑器的标题锚点 autoHeadingAnchors,而不是这个插件。)
  • 折叠会触发编辑器的 change 事件,尽管内容并没有变化。如果您用这个事件把文档标记为未保存,请注意这一点。
  • 只有同级的标题才会一起折叠。位于 div 之类包装元素中的标题,只会折叠该包装元素内部跟在它后面的块。
  • 使用 plugins/all_plugins.js 时,块拖动手柄(⠿)位于同一个左侧页边并遮住了箭头,因此点击会落到手柄上。如果需要点击折叠,请设置 dragHandleEnabled: false,或者通过斜杠菜单或 API 折叠。

相关内容:配置参考、斜杠命令演示、大型文档演示。