CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

CommentsConfig (comments)

@ckeditor/ckeditor5-comments/src/config

interface

The configuration of the comments feature.

ClassicEditor.create( {
	comments: ... // Comments feature configuration.
} )
.then( ... )
.catch( ... );

See all editor options.

Filtering

Properties

  • CommentThreadView : default | undefined

    A view class to be used to create comment thread views (used as annotations - in sidebar balloons or in inline annotations).

    CommentThreadView is used by default when this property is not set.

  • CommentView : default | undefined

    A view class to be used to create comment views.

    CommentView is used by default when this property is not set.

  • copyMarkers : CommentsClipboardCopyConfig | undefined

    Specifies whether comment markers should be preserved on copy-paste and cut-and-paste actions.

    The following values are available:

    • 'default' - the comments will be preserved on cut-paste and drag and drop actions only.
    • 'always' - the markers will be preserved on all clipboard actions (cut, copy, drag and drop).
    • 'never' - the markers will be ignored by clipboard.

    Defaults to 'default'.

  • editorConfig : EditorConfig | undefined

    Configuration for the comments editor.

    By using this property, you can customize the editor instance used in the comments reply field (e.g. by adding plugins or changing features configuration).

    To use the default configuration (allows only for text input, no formatting), you can pass {} to the comments editor configuration.

    ClassicEditor.create( element, {
	comments: {
		editorConfig: {}
	}
} );

    To provide a better experience, you may add more plugins, that will extend the default editor configuration.

    import { Autoformat, List, Bold, Italic } from 'ckeditor5';

ClassicEditor
	.create( {
		comments: {
			editorConfig: {
				extraPlugins: [ Autoformat, Bold, Italic, List ]
			}
		}
	} )

    Importing plugins may not be possible in some scenarios (e.g. when using a build created by the online builder tool). In that case, it is possible to get the plugin constructors from the editor builtin plugins.

    const extraCommentsPlugins = ClassicEditor.builtinPlugins.filter( plugin => {
	return [ 'Bold', 'Italic', Autoformat, List ].includes( plugin.pluginName );
} );


ClassicEditor
	.create( {
		comments: {
			editorConfig: {
				extraPlugins: extraCommentsPlugins
			}
		}
	} )
	.then( ... )
	.catch( ... );

  • formatDateTime : ( Date ) => string | undefined

    A function that takes a Date object, formats it to a desired string and returns it. It should be used when displaying the comment creation date.

  • maxCommentCharsWhenCollapsed : number | undefined

    The maximum number of characters displayed in a comment when the thread view is collapsed. Longer comments will be trimmed.

    Defaults to 140.

  • maxCommentsWhenCollapsed : number | undefined

    The total number of comments shown when the thread view is collapsed.

    The comments are displayed in the following way:

    • The first comment is displayed.
    • Some comments may be hidden (collapsed).
    • An appropriate number of the most recent comments is displayed.

    For example, if this parameter is set to 3, when collapsed, the thread view will display the first comment and two most recent comments.

    Defaults to 2.

  • maxThreadTotalWeight : number | undefined

    The maximum total weight of a thread before the thread becomes collapsed when it is not active:

    • Thread weight is a sum of the weight of its comments.
    • Comment weight is equal to the comment length.
    • The minimal comment weight is 200.

    Defaults to 500.