Ckeditor5-angular: How to configure autosave in the angular integration?

[omotayo89]

I NEED HELP WITH CONFIGURING AUTOSAVE WITH ANGULAR

[Mgsy]

cc @ma2ciek

[ma2ciek]

Hi @omotayo89!

To configure the autosave feature you need to add the Autosave plugin to the CKEditor 5 build and then configure it.

So first, you need to follow the https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html, add the Autosave plugin to the list of plugins, build the editor and copy it to the Angular application.

Then, in the Angular application, you need to import the above build and configure the autosave feature.

<ckeditor [config]="config" [editor]="editor">

import * as ClassicEditorWithAutosave from './path/to/file';

@Component(
    // ...
)
class EditorComponent {
    public Editor = ClassicEditorWithAutosave;

    public config = {
        autosave: {
            // The minimum amount of time the Autosave plugin is waiting after the last data change.
            waitingTime: 5000,
            save: editor => this.saveData( editor.getData() )
        },
    }

    public saveData( data ) {
        // Here you can save the data to the backend and return a promise to that action.
    }
}

[ma2ciek]

The other option is to debounce the <ckeditor> component's change event:

<ckeditor [editor]="editor" #editor">

import { timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
import { CKEditorComponent, CKEditor5 } from '@ckeditor/ckeditor5-angular';
import * as ClassicEditorWithAutosave from './path/to/file';

@Component(
    // ...
)
class EditorComponent {
    @ViewChild( 'ckeditor', { static: true } ) public ckeditorComponent: CKEditorComponent;
    public Editor = ClassicEditorWithAutosave;

    public onReady( editor: CKEditor5.Editor ) {
        this.ckeditorComponent.change
            .pipe( debounce( () => timer( 5000 ) ) )
            .subscribe( () => this.saveData( editor.getData() ) );
    }

    public saveData( data ) {
        // Here you can save the data to the backend.
    }
}

It doesn't require the rebuilding step, however, it's a naive approach, especially when combining with RTE. Also, it allows you to quit a page with the editor before uploading data to the backend.

[omotayo89]

@ma2ciek , thanks so much

[ma2ciek]

I moved this issue to the ckeditor5-angular repository.