Report an issue

guideComments-only mode

The comments feature enables the users to edit the rich-text document and add their comments.

In many applications, the document creation workflow consists of several precisely defined steps such as: content creation, discussion, proof-reading, final review and acceptance etc.

The users of such application may have certain roles and rights. This guide describes how to run the rich-text editor in the comments-only mode, where users are allowed to add and edit comments but not to change the document content. They are also unable to remove comment threads started by other authors.

# Solution overview

Read-only mode comes to mind first when describing the above business need. However, in this use case the editor cannot be in the read-only mode as comments are handled through markers. Marker changes are treated in the same way as typing or any other content change. It means that it is not possible to add any comments in the standard read-only mode.

To support this usage scenario we have created the CommentsOnly plugin that enables the basic comment functionality (like creating, editing and removing threads and comments) and forbids any action that changes the content (like typing, drag & drop, pasting or cutting).

# Enabling comments-only plugin

First, make sure that you correctly installed CKEditor 5 together with the comments plugin.

This tutorial starts where the Comments overview guide ends, so if you do not have a working WYSIWYG editor with comments yet, go there first.

Your code for the editor initialization should look similar to this if you are using real-time collaborative comments:

// app.js
import ClassicEditor 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 CommentsOnly from '@ckeditor/ckeditor5-comments/src/commentsonly';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';

ClassicEditor
    .create( document.querySelector( '.editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, CommentsOnly, 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: 'commentsOnlyMode'
        },
        sidebar: {
            container: document.querySelector( '.sidebar' )
        },
        toolbar: [ 'bold', 'italic', '|', 'comment' ]
    } )
    .catch( error => console.error( error ) );

Or similar to this if you are using a custom comments integration:

// app.js
import ClassicEditor 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 CommentsOnly from '@ckeditor/ckeditor5-comments/src/commentsonly';
// Your custom comments adapter.
import CommentsAdapter from './commentsadapter';

ClassicEditor
    .create( document.querySelector( '.editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, CommentsOnly, CommentsAdapter ],
        licenseKey: 'your-license-key',
        sidebar: {
            container: document.querySelector( '.sidebar' )
        },
        toolbar: [ 'bold', 'italic', '|', 'comment' ]
    } )
    .catch( error => console.error( error ) );

# Live demo

Check out the comments-only mode in action below!

# Security

Please remember that your application should be secured both on front-end and back-end. Even though the users will not be able to introduce their changes through the editor, you should still take care of preventing that in your back-end code.