@ckeditor/ckeditor5-autosave

What is @ckeditor/ckeditor5-autosave?

@ckeditor/ckeditor5-autosave is a plugin for CKEditor 5 that provides automatic saving functionality. It allows the editor to periodically save the content to a server or local storage, ensuring that no data is lost in case of unexpected events like browser crashes or network issues.

What are @ckeditor/ckeditor5-autosave's main functionalities?

Automatic Save

This feature allows the editor to automatically save the content at regular intervals. The provided code sample demonstrates how to configure the CKEditor 5 with the Autosave plugin and define a custom save function that sends the editor's data to a server endpoint.

const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
const Autosave = require('@ckeditor/ckeditor5-autosave/src/autosave');

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [ Autosave ],
    autosave: {
        save( editor ) {
            return saveData( editor.getData() );
        }
    }
})
.catch( error => {
    console.error( error );
});

function saveData( data ) {
    // Simulate a save request to the server
    return fetch( '/save', {
        method: 'POST',
        body: JSON.stringify( { content: data } ),
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

Save on Blur

This feature allows the editor to save the content after a specified period of inactivity. The code sample shows how to configure the Autosave plugin to save the content after 5 seconds of inactivity.

const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
const Autosave = require('@ckeditor/ckeditor5-autosave/src/autosave');

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [ Autosave ],
    autosave: {
        waitingTime: 5000, // Save after 5 seconds of inactivity
        save( editor ) {
            return saveData( editor.getData() );
        }
    }
})
.catch( error => {
    console.error( error );
});

function saveData( data ) {
    // Simulate a save request to the server
    return fetch( '/save', {
        method: 'POST',
        body: JSON.stringify( { content: data } ),
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

Other packages similar to @ckeditor/ckeditor5-autosave

draft-js

Draft.js is a JavaScript rich text editor framework, built for React. It provides a similar autosave functionality through custom implementations. Unlike @ckeditor/ckeditor5-autosave, Draft.js requires more manual setup and configuration for autosave features.

quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It does not have built-in autosave functionality, but similar features can be implemented using Quill's API and event listeners. Compared to @ckeditor/ckeditor5-autosave, Quill requires additional coding to achieve autosave.

tinymce

TinyMCE is a popular rich text editor that offers a variety of plugins, including an autosave plugin. The autosave plugin in TinyMCE provides similar functionality to @ckeditor/ckeditor5-autosave, allowing content to be saved automatically at regular intervals or on specific events.

README

CKEditor 5 autosave feature

This package implements the autosave feature for CKEditor 5.

Documentation

See the @ckeditor/ckeditor5-autosave package page in CKEditor 5 documentation.

Installation

npm install ckeditor5

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.