@ckeditor/ckeditor5-cloud-services

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);
}