← すべてのドキュメント

インラインのゴーストテキスト補完

ユーザーが入力を止めると、指定した関数に文の続きを問い合わせ、カーソルの後ろに灰色で表示します。Tab で採用し、それ以外のキーで閉じます。エディターには AI モデルが含まれず、独自にネットワーク通信もしません。テキストの取得元は、指定した関数で決めます。

「Our support team answers」という文の後ろに、「every ticket within one business day.」という灰色の提案が表示されたエディター
灰色のテキストが提案です。ユーザーが Tab を押すまでは文書の一部になりません。

有効にする

この機能は ghostcomplete.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ツールバーボタンはありません。ghostText を設定し、ghostTextResolver が関数の場合にのみ動作します。

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

<div id="editor"><p>Our support team answers</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    ghostText: true,
    ghostTextResolver: function (ctx) {
        return fetch("/api/complete", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ before: ctx.before })
        })
            .then(function (r) { return r.json(); })
            .then(function (data) { return data.text; });
    }
});
</script>

ここでの /api/complete は、自分で用意するエンドポイントです。カーソルより前のテキストを受け取り、使用するモデルに問い合わせ（API キーはサーバーに保持します）、{ "text": " every ticket within one business day." } を返します。戻り値はそのまま挿入するため、単語の後に続く場合は、返すテキストの先頭に空白を付けてください。

リゾルバーの引数と戻り値

ghostTextResolver(ctx) は、次の情報を受け取ります。

  • ctx.before：現在の段落（または見出し、リスト項目、セルなど）の先頭からカーソルまでのテキストです。末尾の maxContext 文字に切り詰めます。
  • ctx.after：カーソルからそのブロックの末尾までのテキストです。
  • ctx.full：文書全体のテキストです。

文字列、または文字列を解決値とする Promise を返します。空文字列、文字列以外、例外、拒否された Promise の場合は、何も表示しません。応答が届く前に再入力すると、遅れて届いた応答は破棄します。ctx.before に空白以外の文字が minChars 文字以上あり、選択範囲がない場合にのみ提案を要求します。

オプション

オプション既定値動作
ghostTextfalsetrue、または以下の 3 つの設定を持つオブジェクトで有効にします。
ghostText.delayMs600最後の入力からリゾルバーを呼び出すまでの待ち時間です。正の数を指定してください。0 は未設定と扱われ、600 になります。
ghostText.minChars3カーソルの前に必要な、空白以外の文字の最小数です。
ghostText.maxContext2000ctx.before で渡す最大文字数です。
ghostTextResolvernull上記で説明した独自の関数です。

キー操作と API

  • Tab で提案を採用します。入力したテキストとして挿入するため、Ctrl+Z を 1 回押すと取り消せます。
  • Escape、矢印キー、Home、End、PageUp、PageDown で提案を閉じます。文字を入力しても提案が閉じ、新たに待ち時間が始まります。
  • 灰色のテキストをクリックまたはタップすると採用します。Tab キーのないスマートフォンでは、これが唯一の方法です。ほかの場所をクリックすると閉じます。

メソッド：editor.setGhostTextResolver(fn) は実行時にリゾルバーを置き換え、editor.requestGhostText() は待ち時間なしですぐに提案を要求します。editor.acceptGhostText() は採用、editor.dismissGhostText() は破棄、editor.hasGhostText() は提案の有無の確認を行います。スラッシュコマンドのプラグインを読み込むと、「/」メニューの「AI complete」から requestGhostText() を呼び出せます。リゾルバーが未設定の場合は、補完が設定されていないことを示す短い通知がエディターに表示されます。

注意点

  • 表示中の提案は、カーソルの後ろに置かれる次の要素です。
    <span class="rte-ghost" contenteditable="false" data-rte-ghost="1" aria-hidden="true"> every ticket within one business day.</span>
    getHTMLCode()、getHTMLContent()、getJSON() はこの要素を削除するため、保存される HTML にはユーザーが採用したテキストだけが含まれます。スクリーンリーダーは aria-hidden により読み飛ばします。
  • 下部バーの単語数と文字数には、表示中の灰色のテキストも含まれます。
  • 入力が止まるたびに、エンドポイントへの呼び出しが 1 回発生します。サーバーでレート制限とキャッシュを行い、呼び出しに費用がかかる場合は delayMs を長くしてください。
  • requestGhostText() にも ghostText の設定が必要です。リゾルバーだけでは動作しません。

関連情報：AI Toolkit（コマンドによる AI 操作）、AI プロバイダーとストリーミング、文章作成支援のデモ。