Report an issue

guideReal-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!

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

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.