ギャップカーソル

通常はカーソルを置けない位置に段落を追加できます。文書先頭のテーブルの前や、隣接する 2 つのテーブル、水平線などのブロックの間が対象です。矢印キー、隙間のクリック、または青いヒント線のクリックで段落を作成します。

有効にする

この機能は 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 を押すと、入力した文字が段落の外側、テーブル間に直接置かれます。

対象となる隙間

段落の追加を案内するのは、作成者が操作に困る位置だけです。最初のブロックの前、2 つのブロックの間、最後のブロックの後で、隣のブロックが 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+Arrow でのブロック移動には影響しません。
• クリック。エディター内の空白部分をクリックし、その位置が対象の隙間なら、そこに段落を挿入します。
• ヒント。2 つのテーブルは隙間なく接する場合があります。その境界から 10 ピクセル以内にポインターを移動すると青い線が現れ、線の上でマウスを押すと段落を挿入します。

新しい段落は <p><br></p> です。高さがあるため、その中にカーソルが表示されます。

オプションと API

オプション	既定値	動作
gapCursorKeys	true	ブロックの端で矢印、Home、End、Page キーを押すと段落を挿入します。
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 を取り除いてください。
• 提案（変更履歴）モードでは、空の段落をまだ追跡できないため、何も挿入しません。

関連情報：テーブル機能のデモ、テーブルの並べ替えと行番号。