CODEWITHSUNDEEP
javascriptjqueryckeditorevent-listener
chocolata
chocolata

Reputation: 3338

CKEditor checkDirty() on source editing area

Whenever one or more of my CKEditor WYSIWYG instances is changed, I give the corresponding textarea the attribute data-dirty="1", so my application knows it has changed.

I'm using the following snippet for this:

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

This works nicely, unless the user only edits the HTML via the Source Button. In such cases, checkDirty() does not seem to get fired.

Does anyone know how I can get this functionality working on both views of the editor? I am using the latest version of CKEditor (CKEditor 4.5.7), full edition, so the plugins are the latest versions aswel.

Thanks in advance.

Upvotes: 2

Views: 1721

Answers (1)

Anna Tomanek
Anna Tomanek

Reputation: 2239

As the documentation for the change event states:

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

If you are using jQuery adapter and multiple editor instances in one page, you can try below:

        $( '#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);

                    } );
                }
            }); 
        });

The above is the callback function will be executed on a single editor instance but if you specify selector covering multiple editor instances e.g. .myeditor then listener will be attached to every editor instance created by this method.

Upvotes: 4

Related Questions