This sample presents an integration of CKEditor 5 WYSIWYG classic editor with the revision history, comments and track changes features.

1. Clone this repository:

   git clone git@github.com:ckeditor/ckeditor5-collaboration-samples.git
   cd ckeditor5-collaboration-samples

2. Fill-in correct license key (LICENSE_KEY) and CKBox token URL (CKBOX_TOKEN_URL) in credentials.js file. If you do not have these yet or do not know their meaning, refer to the official documentation or contact us directly.

3. Move to the sample directory:

   cd collaboration-editor-classic

4. Install dependencies and start the demo:

   yarn && yarn dev

The sample consists of a simple application using CKEditor 5 classic editor with the Comments, TrackChanges and RevisionHistory plugins using a sidebar and a responsive display mode integration which reacts to the screen width.

If you want to modify the editor setup, for instance to add more plugins, refer to the Configuring features guide.

The integration comes with the watchdog, which is a helpful utility that ensures an editor instance is running and in case of an error, tries to restore it to the working state. See the usage guide in the watchdog documentation.

This sample showcases 2 approaches of integrating Comments, TrackChanges and RevisionHistory plugins with CKEditor 5 - adapter and load and save integrations. The default one used is adapter integration.

To switch to load and save one, navigate to main.js and change the path for imported plugins. Those lines are already in the code, just need to be uncommented, from:

import {
	CommentsIntegration,
	RevisionHistoryIntegration,
	TrackChangesIntegration
} from 'ckeditor5-collaboration-samples-integrations/adapters'; // Use adapters integrations.
// } from 'ckeditor5-collaboration-samples-integrations/load-save'; // Use load/save integrations.

To:

import {
	CommentsIntegration,
	RevisionHistoryIntegration,
	TrackChangesIntegration
// } from 'ckeditor5-collaboration-samples-integrations/adapters'; // Use adapters integrations.
} from 'ckeditor5-collaboration-samples-integrations/load-save'; // Use load/save integrations.

The adapter integration uses the provided adapter object to immediately save related data in your data store. This is the recommended way of integrating comments, track changes and revision history with your application because it lets you handle the client-server communication in a more secure way.

This sample complements the:

• Comments adapter guide from the CKEditor 5 documentation,
• Track changes adapter guide from the CKEditor 5 documentation,
• Revision history adapter guide from the CKEditor 5 documentation.

Treat this sample as a starting point for your own integration and see the source code to learn how it is implemented.

Open the developer console to observe actions performed by the editor when interacting with adapters.

Click the Get editor data button on the bottom of the sample and see the console to understand the data format returned by the editor.

The "Load and save" integration is the simplest way to integrate the CKEditor 5 comments, track changes and revision history with your application. In this solution, users, comments, suggestions and revisions data is loaded during the editor initialization and saved after you finish working with the editor (for example when the form with the editor is submitted).

This sample complements:

• A simple "load and save" Comments integration guide from the CKEditor 5 documentation,
• A simple "load and save" Track Changes integration guide from the CKEditor 5 documentation,
• A simple "load and save" Revision History integration guide from the CKEditor 5 documentation.

Treat this sample as a starting point for your own integration and see the source code to learn how it is implemented.

Click the Get editor data button on the bottom of the sample and see the console to understand the data format returned by the editor.