Real-time collaborative comments

The real-time collaboration package contains a ready-to-use comments integration. When using it, you do not need to create any adapters to define how to store the comments data since they are saved in CKEditor Could Services.

The real-time collaborative comments feature requires the RealTimeCollaborativeEditing plugin to work. The real-time collaborative editing plugin takes care of sending the comment markers in text. It also ensures that all clients have the same document version when a user adds a comment to a part of it.

This tutorial starts where the Real-time collaborative editing and Comments overview guides end, so if you are not familiar with them yet, go there first.

Collaborative commands also need the RealTimeCollaborativeComments plugin to be included in your build. If you are using the build from the quick start guide it is already included, but if you are creating your custom build in any other way, you need to include it manually now.

To make collaborative comments work, you need to make three changes in the code from the Real-time collaborative editing tutorial:

Set up a two-column layout.
Add the sidebar configuration.
Add the comment button to the toolbar. If you use the ImageToolbar plugin, add the comment button to the image toolbar separately.

An updated sample 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="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' ],
            plugins: [ 'Essentials', 'Paragraph', 'Bold', 'Italic', 'EasyImage', 'RealTimeCollaborativeComments' ],
            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' )
            }
        } );
    </script>
</html>

Refer to the Comments overview guide to learn more about the special HTML structure for the sidebar.

Note that you do not need to manually import the RealTimeCollaborativeEditing and Comments plugins anymore. The collaborative comments plugin requires them and will enable them automatically.

Also, note that to make the integration work out of the box, all comments are saved in CKEditor Cloud Services, so there is no need to handle comments content or authors. However, if any comment is added, the corresponding marker is added to your document content. To learn more, see the Saving comments section.

We understand that due to legislation or your company’s policy you may be required to store such data in your own data center or private cloud. This is why we also provide the on-premises version of CKEditor Cloud Services. Contact us to learn more about it.

This is it. You should now be able to add real-time collaborative comments to your rich-text document, and you should see them on all clients.