如何将 onchange 和 onkeyup 与 CKEDITOR 绑定？

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

有一个 change event and a key 事件。

change event: Fired when the content of the editor is changed.

Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice.

If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.

Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by 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.
        } );
    }
} );

key event: Fired when any keyboard key (or a combination thereof) is pressed in the editing area.

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();
    }
} );

如何将 onchange 和 onkeyup 与 CKEDITOR 绑定？

How can I bind onchange and onkeyup with CKEDITOR?

javascript

jquery

ckeditor

ckeditor4.x