エンジニアブログ

CKEditorで編集されたことを検知する

ぴろり上西 2010年12月06日

　CKEditor の現在のバージョンでは、コンテンツが編集されたことを検知するイベントハンドラが実装されていません。そのため、何か編集されたことをトリガにして動作を行いたい場合、ちょっとした hack が必要になります。

function myCheckDirty () {
    var inst = CKEDITOR.instances.editor1;
    if (inst && inst.checkDirty()) {
        var data = inst.getData(), orig_data = data;
        // data をごにょごにょ
        if (data != orig_data)
            inst.setData(data, function () { inst.resetDirty(); });
    }
    setTimeout (myCheckDirty, 250);
}
myCheckDirty();

　エディタのインスタンスに対して、定期的に checkDirty メソッドを実行することで、コンテンツが変化したことを検知する必要があります。また、setData メソッドで、データを更新した場合、そのコールバック関数を利用して、Dirty フラグをクリアしてやる必要があります。setData の後に、普通に resetDirty を呼んでも、データのセットが完了していないので、意味がありません。