スペルチェック

編集領域でブラウザーのスペルチェッカーを有効にし、独自のスペルチェックサービスを使う確認パネルを開ける Spell Check コマンドを追加します。辞書は含まれません。サービスがない場合は、利用者のブラウザーと OS が、インストール済みの言語で提供するチェックを使います。

有効にする

この機能は spellcheck.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ボタンは spellcheck（「Spell Check」）です。full ツールバーと既定ツールバーの「more」パネルにあり、スラッシュメニューでは「Spell check」と表示されます。独自のツールバーには、文字列に spellcheck を追加します。

プラグインを読み込むとブラウザー標準のチェックが有効になり、ほかの設定は不要です。確認パネルを使うには、文書のプレーンテキストを受け取り、問題点、またはそれを解決値とする Promise を返すリゾルバーを指定します。

// A stand-in for your spelling service: returns [{ word, offset, length, suggestions }].
var dictionary = { teh: ["the", "tech"], jumpd: ["jumped", "jumps"], befor: ["before", "befog"] };
var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  spellCheckResolver: function (text) {
    var issues = [];
    text.replace(/[A-Za-z]+/g, function (w, offset) {
      var s = dictionary[w.toLowerCase()];
      if (s) issues.push({ word: w, offset: offset, length: w.length, suggestions: s });
    });
    return Promise.resolve(issues);
  }
});

実際のアプリでは、リゾルバーから自分のサーバーを呼び出し、Hunspell や LanguageTool などのチェッカーを実行して、結果を次の形式に変換します。

spellCheckResolver: function (text) {
  return fetch("/spell", { method: "POST", body: text }).then(function (r) { return r.json(); });
}

オプション

オプション	既定値	動作
spellCheckEnabled	true	起動時に、編集領域に spellcheck="true" または "false" を設定します。
spellcheck	true	同じ属性を制御する、コアエディター自身の設定です。両方のオプションが true の場合にのみ、属性が "true" になります。
spellCheckResolver	null	{ word, offset, length, suggestions } の配列、またはそれを解決値とする Promise を返す function (text) です。未指定の場合、コマンドは標準のチェックを有効にするだけです。
text_spellcheck, text_spellchecktitle, text_spellchecknative, text_spellcheckclean, text_sp_*	英語	ボタンのラベル、パネルのタイトル、メッセージです。言語パックで設定します。

使い方

• リゾルバーがない場合。コマンドは編集領域に spellcheck="true" を設定してフォーカスし、ページ下部に「Browser spell-check is on — misspellings are underlined as you type.」と短く表示します。spellCheckEnabled: false で開始していても、標準のチェックを再び有効にします。修正はブラウザーのコンテキストメニューで行います。
• リゾルバーがある場合。文書の innerText をリゾルバーに送り、Spelling パネルを開きます。各問題には単語と最大 6 件の修正候補を表示します。候補をクリックすると単語を置き換え、行を灰色にします。問題がなければ「No spelling issues found.」、文書が空なら「Nothing to check.」と表示します。
• Promise が拒否されると「Spell-check service error.」、12 秒を超えると「Spell-check timed out.」、例外が発生すると「Spell-check error.」と表示します。

注意点

• 位置ではなく単語で置き換えます。候補は、文書内で最初に単語全体が word と一致する箇所を置き換えます。code と pre 内は除外します。offset と length は使わないため、同じスペルミスが 2 回あれば、クリックごとに上から次の箇所を修正します。
• 置き換えは元に戻す履歴に入りません。2.6.12 では、候補をクリックした後に Undo を実行しても元の単語に戻りません。
• 言語。専用の言語設定はありません。標準のチェックはブラウザーと OS の辞書を使います。リゾルバーを使う場合、言語はサービス側で決まります。たとえば fetch("/spell?lang=fr", …) のようにページから渡してください。
• テキストは自分のサービスに渡します。チェックのたびに、文書全体のプレーンテキストをリゾルバーに渡します。プラグイン自身は、どこにも送信しません。
• 保存する HTML には何も追加しません。spellcheck 属性は編集領域に付き、コンテンツには含まれません。

関連情報：スペルチェックのデモ、スラッシュコマンド。