[HTML] リッチなWYSIWYGエディタ「CKEditor」で変更イベントをキャッチする

WYSIWYGエディタ「CKEditor」を使えばとってもリッチなテキスト編集ができます。
( CKEditor の表示は 前編、設定は 中編 をご覧ください。)

CKEditor からイベントを受けてどうこうするところです。
ようやくこれで一段落します。

前編・中編では JavaScript で書いてきましたが、そろそろ JQuery を使います。

変更イベントを登録する

  1. イベントの登録は、CKEditor インスタンスの準備完了を待ってから行います。
    instanceReady がインスタンスの準備完了イベントです。インスタンス毎に発生するので、複数の CKEditor を配置 している場合は何度も発生します。

  2. 準備が整った CKEditor インスタンスは e.editor で取得できます。
    このインスタンスに対してイベントを登録します。

  3. 変更イベント change を登録します。
    インスタンスによって処理を分けるなら editor.name で ID を取得して分岐します。

  4. イベントを発生させた CKEditor インスタンスを e.editor で取得できます。
    CKEDITOR.instances[e.editor.name] でも取得できます。

ブラウザによるイベント発生の差異

変更イベント “change” は、キー入力によってテキストが変更された時、ツールボタンによって表示が変更された時、これらのタイミングで発生します。

この「キー入力によってテキストが変更された時」はブラウザによって異なります。
ちょっと変更イベントとキーイベントを検証してみました。

Chrome

英数入力

キーを押した時に “key” が発生します。このタイミングではまだ文字は入力されていません。
その後、”change” → “keyup” と続けて発生します。

日本語入力

英数入力と同様に1文字入力するごとにイベントが発生して、変換候補を切り替えるごとにイベントが発生して、変換確定でイベントが発生すると。
徹底的にイベントが発生するので、キー操作に対して常に処理が実行されることになります。

Firefox

英数入力

キーを押した時に “key” が発生します。このタイミングではまだ文字は入力されていません。
その後、”change” → “document keyup” と続けて発生します。

流れは Chrome と同じなんですが、”keyup” イベントが CKEditor インスタンスではなく、その配下の document で発生します。

日本語入力

確定した時にしか変更イベントが発生しません。
Chrome とは違って、本当に反映された時に処理が実行されることになります。

日本語入力中にフォーカス移動

Chrome

Firefox

日本語入力中にマウスでフォーカス移動しました。その場合、入力中の文字はフォーカスが移動した時に確定されます。確定されるのに、どちらのブラウザでもそのタイミングではイベントは発生しません。

結果的に、Firefox では内容が変わったのに “change” が発生しないことになります。
内容変更を受けて処理をする、というシナリオは “change” では確実ではありません。

で、ならどうしたら確実に変更イベントが拾えるのか、というところが解決に至っていないという…。 いい方法があれば教えてください。

まーや
About まーや (34 Articles)
画像変換サービスPictureFitterを担当しています。 ネコ大好きのアンドロイダーです。
Contact: Twitter

Leave a comment

Your email address will not be published.

*



Top