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.

Complementary to this guide, we provide a ready-to-use sample available for download. You may use the sample as an example or as a starting point for your own integration.

# 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).

After adding the CommentsOnly plugin it is important to set the editorConfig.commentsOnly option to true to switch the editor to the comments-only mode. Note that this option makes the comments-only mode dynamic, so with one build both editor modes are available.

# 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 a custom comments integration:

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 Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';

import Comments from '@ckeditor/ckeditor5-comments/src/comments';
import CommentsOnly from '@ckeditor/ckeditor5-comments/src/commentsonly';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, Image, Comments, CommentsOnly ];

// Editor configuration.
ClassicEditor.defaultConfig = {
    // The configuration option which turns on the comments-only mode in the editor.
    commentsOnly: true
    toolbar: {
        items: [ 'bold', 'italic', '|', 'comment' ]
    },
    image: {
        toolbar: [ 'comment' ]
    },
    language: 'en'
};

If you use link features/real-time-collaboration-integration real-time collaborative comments} you need to add RealTimeCollaborativeComments plugins to the list of builtinPlugins.

If you want some users to be able to edit the content, remove this plugin in the editor configuration by using the removePlugins: 'CommentsOnly' option.

# 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.