Get modified content after inline CKEditor closes

Question

I'm using version 4.4.4 of CKEditor in inline mode to allow users to edit almost all text content on a page - basically I'm using the functionality from CKEditor's "Massive inline editing" demo the comes in the CKEditor ZIP.

What I can't figure out is how I know when a user has finished editing a DOM element and has closed the CKEdtitor dialog (which is presumably when CKEditor copies the content from it's internal editor to the DOM element). I cannot find a (working) onblur, onclose or similar event.

Answer 1

First of all - DOM is modified live when you use editor. That's simply because what you edit is what you see and what you see is what's in the DOM. More or less...

... because DOM inside an editor is not data. You should never try to save into your database something like $( '.editor' ).html(). This is wrong.

Instead, each editor instance has a getData() method which returns a value in which you're interested. Editor instances are available in CKEDITOR.instances object under their id (of an element on which they were created) or automatically generated name (editor<num>).

Now. There's no single definition of "when user finished editing", so I'll stick to the most popular one - "when user blurred editor". Assuming that you have many inline editors on your page and all were automatically created you will need to use something like this after attaching ckeditor.js script:

CKEDITOR.on( 'instanceCreated', function( evt ) {
    var editor = evt.editor;
    editor.on( 'blur', function() {
        console.log( 'Saving...', editor.name, editor.getData() );
    } );
} );

This code will add an editor#blur listener to every instance that's created. When user blurs editor the editor name and its data will be logged.

Answer 2

I think electron is right, that ckeditor changes the DOM element directly, and there is no copying onBlur happening. Also there is no "native" ckeditor onBlur event.

That said, I found a way to generate onFocus and onBlur events:

1. ckeditior provides an currentInstance event that is fired whenever there is a focus change. http://docs.ckeditor.com/#!/api/CKEDITOR-event-currentInstance

2. There is a css class .cke_focus added to the currently focused element.

Using these two facts (and jQuery for an easy demo) we can write our own onBlur and onFocus Events:

var onCurrentInstance = function(){
    var focused = $();

    var onBlur = function(obj){
        console.log("Blur:", obj);
    };

    var onFocus = function(obj){
        console.log("Focus:", obj);
    };          


    return function(e){
        var cke_focus = $(".cke_focus");

        if(cke_focus.size() > 0) onFocus(cke_focus);
        if(focused.size() > 0) onBlur(focused);

        focused = cke_focus;
    };

};

CKEDITOR.on( "currentInstance", onCurrentInstance());

This is a very basic example that can be copy&pasted into the samples/inlineall.html example that comes with ckeditor. Don't forget to add jQuery to the example:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

---

UPDATE: here is the same functionality in a more generic way to allow to bind multiple onFocus and onBlur events:

var bindFocusBlur = function(onFocus, onBlur){
    var focused = $();

    return function(e){
        var cke_focus = $(".cke_focus");

        if(cke_focus.size() > 0 && typeof onFocus === "function"){
            onFocus(cke_focus);
        }
        if(focused.size() > 0 && typeof onBlur === "function"){
            onBlur(focused);
        }

        focused = cke_focus;
    };
};

Used like this:

var onFocus = function(){};
var onBlur = function(){};

var onFocus2 = function(){};

CKEDITOR.on( "currentInstance", bindFocusBlur( onFocus, onBlur ));

CKEDITOR.on( "currentInstance", bindFocusBlur( onFocus2 ));