I'm trying to implement an autosave feature in CKEditor 5, where a save only occurs if changes were made and after the editor has lost focus.

How could I do this? The documentation has been very confusing to me.

This is the closest I've gotten:

function onChange(el,editor) {
    editor.document.once('change',function(evt,data) {
        $(el).one('blur',function() {
            saveFunction();
            onChange(el,editor);
        });
    });
}

onChange(el,editor);

The problem with my solution is the blur event fires whenever CKEditor brings up a modal.

I'm trying to implement an autosave feature in CKEditor 5, where a save only occurs if changes were made and after the editor has lost focus.

How could I do this? The documentation has been very confusing to me.

This is the closest I've gotten:

function onChange(el,editor) {
    editor.document.once('change',function(evt,data) {
        $(el).one('blur',function() {
            saveFunction();
            onChange(el,editor);
        });
    });
}

onChange(el,editor);

The problem with my solution is the blur event fires whenever CKEditor brings up a modal.

• javascript
• ckeditor
• ckeditor5

3 Answers 3

To track the focused element of the editor ui you can use the focusTracker (available on editor.ui.focusTracker). It tracks various parts of the editor that are currently focused.

The focusTracker.isFocused is true whenever any of the editor's registered components are focused. For the classic editor build the focused elements might be one of:

• editing area,
• toolbar,
• contextual toolbar.

editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
    if ( !isFocused ) {
        // Do whatever you want with current editor data:
        console.log( editor.getData() );
    }
} );

Based on jodators answer fullfilling Adams 2nd critieria (data has changed):

var editor_changed = false;

editor.model.document.on('change:data', () => { editor_changed = true; });

editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
  if(!isFocused && editor_changed) {
    editor_changed = false;
    console.log(editor.getData());
  }
} );

Here a complete example based on both the answers of @Peter and @jodator. It uses the CKEditor 5 Inline Editor. As Adam Cook mentioned in his question, the documentation is not very clear.

<div id="textblock1" class="editor">
    <p>
        Lorem ipsum dolor sit amet.
    </p>
</div>

<div id="textblock2" class="editor">
    <p>
        Sed ut perspiciatis unde omnis iste natus.
    </p>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/inline/ckeditor.js"></script>

<script>
    var text_changed = false;

    InlineEditor
        .create(document.querySelector('.editor'), {
        })
        .then(editor => {
            window.editor = editor;

            detectTextChanges(editor);
            detectFocusOut(editor);
        })
        .catch(error => {
            console.error(error);
        });

    function detectFocusOut(editor) {
        editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
            if (!isFocused && text_changed) {
                text_changed = false;
                console.log(editor.getData());
            }
        });
    }

    function detectTextChanges(editor) {
        editor.model.document.on('change:data', () => {
            text_changed = true;
        });
    }
</script>