Comments-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 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 = {
    toolbar: {
        items: [ 'bold', 'italic', '|', 'comment' ]
    },
    image: {
        toolbar: [ 'comment' ]
    },
    language: 'en'
};

If you use 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!

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.

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