CKEditor检查源编辑区上的Dirty(）

CKEditor checkDirty() on source editing area

本文关键字：Dirty 检查 编辑区 CKEditor      更新时间：2023-09-26

每当我的一个或多个 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;
        }
    });
});

这很好用，除非用户仅通过源按钮编辑 HTML。在这种情况下，checkDirty()似乎不会被解雇。

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

提前谢谢。

正如 change 事件的文档所述：

请注意，change事件仅在所见即所得模式下触发。为了在源模式下实现类似的功能，例如，您可以侦听key事件或本机input事件（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);
                    } );
                }
            }); 
        });

以上是回调函数将在单个编辑器实例上执行，但如果您指定涵盖多个编辑器实例的选择器，例如 .myeditor侦听器将附加到此方法创建的每个编辑器实例。

相关文章：