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.