Real-time collaboration overview

CKEditor 5 real-time collaboration features let you customize any CKEditor 5 build to include real-time collaborative editing and commenting features and tailor them to your needs.

Share the complete URL of this page with your colleagues to collaborate in real time!

Bilingual Personality Disorder

This may be the first time you hear about this made-up disorder but it actually isn’t so far from the truth. As recent studies show, the language you speak has more effects on you then you realise. According to the studies, the language a person speaks affects their cognition, behaviour, emotions and hence their personality.

This shouldn’t come as a surprise since we already know that different regions of the brain becomes more active depending on the activity. Since structure, information and especially the culture of languages varies substantially and the language a person speaks is a essential element of daily life.

Real-time collaboration features include three separate plugins that can be customized and used independently of one another with any CKEditor 5 build.

Real-time collaborative editing – Allows for editing the same document by multiple users simultaneously. It also automatically solves all conflicts if users make changes at the same time.
Real-time collaborative comments – Makes it possible to add comments to any part of content in the editor.
Users selection and presence list – Shows the selection of other users and lets you view the list of users currently editing the content in the editor.

All of the above features are fully adjustable. This makes implementing real-time collaborative editing within your application a highly customizable out-of-the-box experience.

Collaboration features in CKEditor 5 WYSIWYG editor screenshot

# Quick Start

The real-time collaboration feature needs a cloud service to synchronize content between the clients, so first you need to sign up to the Collaboration service powered by CKEditor Cloud Services. Refer to CKEditor Cloud Services Collaboration - Quick Start for more details.

Then, you need to create a custom build, because this plugin is not included in any of the official builds offered. The following instructions describe step-by-step what you need to do.

To enable real-time collaboration, you need to create a custom CKEditor 5 build that would include the real-time collaboration feature.

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git ckeditor5-with-real-time-collaboration
cd ckeditor5-with-real-time-collaboration
npm install

To add the basic collaborative editing features to your editor, install the @ckeditor/ckeditor5-real-time-collaboration package:

npm install --save-dev @ckeditor/ckeditor5-real-time-collaboration

And use this code to enable real-time collaborative editing in classic editor. An updated src/ckeditor.js should look like this:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import EasyImageUpload from '@ckeditor/ckeditor5-easy-image/src/easyimage';

import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';
import PresenceList from '@ckeditor/ckeditor5-real-time-collaboration/src/presencelist';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, ImageToolbar, EasyImageUpload, RealTimeCollaborativeEditing, RealTimeCollaborativeComments, PresenceList ];

// Editor configuration.
ClassicEditor.defaultConfig = {
    language: 'en'
};

Note that your custom build needs to be bundled using webpack.

npm run build

Read more about installing plugins.

Then, you need to place your bundle in an HTML document and create the editor. In this case you need to additionally define CKEditor Cloud Services connection data. An updated src/ckeditor.js should look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Collaboration – Hello World!</title>

        <style type="text/css">
         #container {
             /* To create the column layout. */
             display: flex;

             /* To make the container relative to its children. */
             position: relative;
         }

         #container .ck.ck-editor {
             /* To stretch the editor to max 700px 
                (just to look nice for this example but it can be any size). */
             width: 100%;
             max-width: 700px;
         }

         #sidebar {
            /* Set some size for the sidebar (it can be any). */
            min-width: 300px;

            /* Add some distance. */
            padding: 0 10px;
         }
        </style>
    </head>

    <div id="presence-list-container"></div>

    <div id="container">
        <div id="editor">
            <p>Let's edit this together!</p>
        </div>
        <div id="sidebar"></div>
    </div>

    <script src="../build/ckeditor.js"></script>
    <script>
        ClassicEditor.create( document.querySelector( '#editor' ), {
            toolbar: [ 'bold', 'italic', 'imageUpload', 'comment' ],
            cloudServices: {
                // PROVIDE CORRECT VALUES HERE:
                tokenUrl: 'https://example.com/cs-token-endpoint',
                uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
                webSocketUrl: 'your-organization-id.cke-cs.com/ws/',
                documentId: 'collaboration'
            },
            sidebar: {
                container: document.querySelector( '#sidebar' )
            },
            presenceList: {
                container: document.querySelector( '#presence-list-container' )
            }
        } );
    </script>
</html>

Voilà! All users who open this page should be able to collaborate, working on this rich-text document at the same time.

Although classic editor was used in the example above, real-time collaboration, like every other official CKEditor 5 plugin, will work with any editor creator.

Since you have a working sample of rich-text editor with real-time collaboration, it is time to learn a little more about how the configuration works and what customization options you have. See further real-time collaboration guides to learn more.