如何使用CKEDITOR綁定onchange和onkeyup？

Question

如果我們有未保存的表單並且用戶取消了，我想集成一個確認，我們向他顯示一條消息。 它非常適合輸入，但不適用於ckeditor。 這是我的代碼。

$(document).ready(function () {
    $('form').attr('onsubmit', 'disableBeforeUnload();');
    $('form input').attr('onchange', 'enableBeforeUnload();');
    $('form input').attr('onkeyup', 'enableBeforeUnload();');
    $('form textarea').attr('onchange', 'enableBeforeUnload();');
    $('form textarea').attr('onkeyup', 'enableBeforeUnload();');

});

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

有什么想法可以實現這一目標嗎？

Answer 1

有一個更改事件和一個關鍵事件。

更改事件：更改編輯器的內容時​​觸發。

由於性能原因，無法驗證內容是否確實更改。 相反，編輯器監視通常會導致更改的幾種編輯操作。 因此，在某些情況下，如果沒有發生更改，則可能會觸發此事件，甚至可能觸發兩次。

如果重要的是不要使更改事件觸發得太頻繁，則應在事件偵聽器中比較以前和當前的編輯器內容。 不建議在每個更改事件上執行此操作。

請注意，更改事件僅在所見即所得模式下觸發。 為了在源模式下實現類似的功能，您可以偵聽例如按鍵事件或本機輸入事件（Internet Explorer 8不支持）。

editor.on( 'mode', function() {
    if ( this.mode == 'source' ) {
        var editable = editor.editable();
        editable.attachListener( editable, 'input', function() {
            // Handle changes made in the source mode.
        } );
    }
} );

鍵盤事件：在編輯區域中按下任何鍵盤鍵（或其組合）時觸發。

editor.on( 'key', function( evt ) {
    if ( evt.data.keyCode == CKEDITOR.CTRL + 90 ) {
        // Do something...

        // Cancel the event, so other listeners will not be executed and
        // the keydown's default behavior will be prevented.
        evt.cancel();
    }
} );