间隙光标
让用户在光标通常无法到达的位置添加段落:位于文档最顶部的表格之前,或者两个紧挨在一起的表格、分隔线或其他块之间。按方向键、点击间隙,或者点击蓝色的提示线,都会创建这个段落。


启用
该功能由 gapcursor.js 插件提供(也包含在 plugins/all_plugins.js 中)。加载它即可;它没有工具栏按钮。
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/gapcursor.js"></script>
<div id="editor"><table style="width:100%"><tbody><tr><td>Plan</td><td>Price</td></tr><tr><td>Starter</td><td>$129</td></tr></tbody></table><table style="width:100%"><tbody><tr><td>Region</td><td>Tax</td></tr><tr><td>EU</td><td>20%</td></tr></tbody></table></div>
<script>
var editor = new RichTextEditor("#editor");
</script>
没有这个插件时,在这份文档中,从第一个单元格按 ArrowUp,光标会留在单元格中;从第一个表格末尾按 ArrowRight,输入的文字会散落在两个表格之间,不属于任何段落。
哪些间隙有效
只有在作者被困住的地方才会提供间隙:在第一个块之前、两个块之间或最后一个块之后,并且相邻的块是 table、hr、img、figure、iframe、video、audio、object、embed、canvas、svg 或 pre 之一,且那里还没有段落。只检查直接位于文档 body 中的块。编辑器本身已经会在文档末尾的表格之后保留一个空段落,因此实际上间隙出现在顶部和块之间。
使用方法
- 键盘。在这类块的末尾按 ArrowDown、ArrowRight、End 或 PageDown,或者在其开头按 ArrowUp、ArrowLeft、Home 或 PageUp,会在相应一侧插入一个段落。在表格中,对于 ArrowDown,“末尾”指最后一行;对于 ArrowRight,则指最后一个单元格;在表格内部,这些键照常移动。带有 Shift、Ctrl、Alt 或 Cmd 的按键不受影响,因此选择操作和 Alt+方向键的块移动都不受影响。
- 点击。在编辑器空白处的点击如果落在间隙中,会在那里插入段落。
- 提示。两个表格可能紧贴在一起,中间没有任何像素。把指针移到这种边界 10 像素以内时会显示一条蓝线,在上面按下鼠标即可插入段落。
新段落是 <p><br></p>,因此它有高度,光标在其中可见。
选项与 API
| 选项 | 默认值 | 作用 |
|---|---|---|
gapCursorKeys | true | 在块边缘按方向键、Home、End 和翻页键会插入段落。 |
gapCursorClick | true | 在间隙中点击会插入段落。 |
gapCursorHint | true | 指针靠近间隙时显示蓝色提示线。 |
editor.getGapPositions()返回可以插入段落的子元素索引,例如上面的文档返回[0, 1]。editor.insertParagraphAt(index)在 body 中该索引处的子元素之前插入一个空段落,并把光标放入其中。editor.insertParagraphBefore(element)和editor.insertParagraphAfter(element)在给定元素旁边做同样的事。
注意事项
- 在用户提出要求之前不会添加任何内容,因此以表格开头的文档会原样保存。
- 提示线在显示期间是编辑区域中的一个真实元素:
<div class="rte-gap-hint" contenteditable="false" aria-hidden="true"></div>。当指针移到编辑器中的其他位置时,它会被移除;但在 2.6.12 中,如果指针直接从间隙离开编辑器(例如从开头表格上方的间隙向上移到工具栏),它会一直保留,此时getHTMLCode()会包含它。如果您通过工具栏按钮保存,请设置gapCursorHint: false,或者在服务器上删除div.rte-gap-hint。 - 在建议(修订跟踪)模式下,插件不会插入任何内容,因为目前还无法跟踪空段落。