What is @ckeditor/ckeditor5-cloud-services?
@ckeditor/ckeditor5-cloud-services is a package that provides cloud-based services for CKEditor 5, including real-time collaboration, image upload, and automatic save. It allows developers to integrate these features into their CKEditor 5 instances with ease.
What are @ckeditor/ckeditor5-cloud-services's main functionalities?
Real-time Collaboration
This feature allows multiple users to collaborate on the same document in real-time. The code sample demonstrates how to initialize CKEditor 5 with cloud services for real-time collaboration.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
const CloudServices = require('@ckeditor/ckeditor5-cloud-services/src/cloudservices');
ClassicEditor.create(document.querySelector('#editor'), {
cloudServices: {
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
}
}).then(editor => {
console.log('Editor was initialized', editor);
}).catch(error => {
console.error(error.stack);
});
Image Upload
This feature allows users to upload images to the cloud directly from the editor. The code sample shows how to configure the editor to use cloud services for image uploads.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
const CloudServices = require('@ckeditor/ckeditor5-cloud-services/src/cloudservices');
ClassicEditor.create(document.querySelector('#editor'), {
cloudServices: {
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
}
}).then(editor => {
console.log('Editor was initialized', editor);
}).catch(error => {
console.error(error.stack);
});
Automatic Save
This feature enables automatic saving of the document content to the server. The code sample demonstrates how to set up automatic save functionality using cloud services.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
const CloudServices = require('@ckeditor/ckeditor5-cloud-services/src/cloudservices');
ClassicEditor.create(document.querySelector('#editor'), {
cloudServices: {
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
},
autosave: {
save(editor) {
return saveData(editor.getData());
}
}
}).then(editor => {
console.log('Editor was initialized', editor);
}).catch(error => {
console.error(error.stack);
});
function saveData(data) {
// Save data to your server
console.log('Saving data', data);
}
Other packages similar to @ckeditor/ckeditor5-cloud-services
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It offers a similar real-time collaboration feature through third-party services like Pusher or Firebase. However, it does not provide built-in cloud services for image upload or automatic save.
tinymce
TinyMCE is a popular rich text editor that offers a wide range of plugins for additional functionalities, including image upload and real-time collaboration. Unlike @ckeditor/ckeditor5-cloud-services, TinyMCE requires separate configuration and third-party services for real-time collaboration.
prosemirror
ProseMirror is a toolkit for building rich text editors with a focus on extensibility and customizability. It provides the building blocks for real-time collaboration and image upload but requires more manual setup compared to the out-of-the-box solutions provided by @ckeditor/ckeditor5-cloud-services.