← 全部文档

间隙光标

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

编辑器中前后相接的两个表格,鼠标指针下方两者之间的间隙中画着一条蓝线和一个圆点
把鼠标悬停在两个表格之间的边界上会显示提示线。点击它会在那里插入一个空段落。
同样的两个表格,两者之间有一个新段落,内容为 Prices exclude tax.
点击之后:两个表格之间出现了一个段落,其中是输入的文字。

启用

该功能由 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

选项默认值作用
gapCursorKeystrue在块边缘按方向键、Home、End 和翻页键会插入段落。
gapCursorClicktrue在间隙中点击会插入段落。
gapCursorHinttrue指针靠近间隙时显示蓝色提示线。
  • 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。
  • 在建议(修订跟踪)模式下,插件不会插入任何内容,因为目前还无法跟踪空段落。

相关内容:表格支持演示、表格排序与行号。