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

启用
该功能由 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
| 选项 | 默认值 | 作用 |
|---|---|---|
foldHeadingsEnabled | true | false 会关闭点击折叠。下面的方法仍然可以使用。 |
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 折叠。