源代码编辑区上的 CKEditor checkDirty()

Question

每当我的一个或多个 CKEditor 所见即所得实例发生变化时，我都会为相应的文本区域赋予属性 data-dirty="1"，因此我的应用程序知道它已发生变化。

我为此使用以下代码段：

$('textarea.wysiwyg').ckeditor(ckeditor_config, function () {
    var call_once = false;
    this.on('change', function () {
        if (this.checkDirty()) {
            if (!call_once) {
                $(this.element).attr('data-dirty', 1);
                $('#edit_form').change();
            }
            call_once = true;
        }
    });
});

这很好用，除非用户仅通过 Source Button 编辑 HTML。在这种情况下，checkDirty() 似乎没有被解雇。

有谁知道如何在编辑器的两个视图上使用此功能？我使用的是最新版本的CKEditor（CKEditor 4.5.7），完整版，所以插件也是最新版本。

提前致谢。

Answer 1

如 documentation for the 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.
        } );
    }
} );

如果您在一个页面中使用 jQuery 适配器和多个编辑器实例，您可以尝试以下操作：

        $( '#editor1' ).ckeditor( function(){ this.on( 'mode', 
            function( evt ) {
                if ( this.mode == 'source' ) {
                    var editable = this.editable();
                    // Get the textarea
                    var element = $(this.element); 
                    editable.attachListener( editable, 'input', function( ev ) {
                        // Handle changes made in the source mode.
                        console.log( ev );
                        // Set an attribute on the textarea for handling
                        element.attr('data-dirty',1);

                    } );
                }
            }); 
        });

以上是 callback function 将在单个编辑器实例上执行，但如果您指定覆盖多个编辑器实例的选择器，例如.myeditor 然后侦听器将附加到通过此方法创建的每个编辑器实例。

源代码编辑区上的 CKEditor checkDirty()

CKEditor checkDirty() on source editing area

javascript

jquery

event-listener

ckeditor