Sign up (with export icon)

CommentsConfig

Api-interface icon interface

The configuration of the comments feature.

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

See all editor options.

Properties

  • Chevron-right icon

    CommentThreadView : BaseCommentThreadView | 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.

  • Chevron-right icon

    CommentView : CommentView | undefined

    A view class to be used to create comment views.

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

  • Chevron-right icon

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

  • Chevron-right icon

    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: {}
    	}
    } );
    
    Copy code

    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 ]
    			}
    		}
    	} )
    
    Copy code

    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( ... );
    
    Copy code
  • Chevron-right icon

    formatDateTime : ( date: 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.

  • Chevron-right icon

    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.

  • Chevron-right icon

    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.

  • Chevron-right icon

    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.