javascript - CKEditor checkDirty() 在源代码编辑区域

Question

每当我的一个或多个 CKEditor WYSIWYG 实例发生更改时，我都会为相应的文本区域赋予属性 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() 似乎不会被解雇。

有谁知道如何让此功能在编辑器的两个 View 上运行？我使用的是最新版本的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 然后监听器将附加到由此方法创建的每个编辑器实例。