Configuration of annotations
Tweaking the configuration of CKEditor 5 collaboration features is another easy way to change the behavior of the collaboration features views.
# Collaboration features configuration
The full documentation of available configuration options can be found on the comments feature API and track changes feature API sites.
Note that comments configuration also applies to comments in a suggestion thread.
# Comment editor configuration
The editor used for adding and editing comments is also a CKEditor 5 instance. By default it uses the following plugins:
Essentials
,Paragraph
,Autoformat
,Bold
,Italic
,List
.
These plugins allow for creating the comment content with some basic styles.
However, it is possible to extend the comment editor configuration and add some extra plugins or even overwrite the entire configuration and replace the list of plugins. You can modify the comment editor configuration by using the comments.editorConfig
property in the main editor configuration.
See the sample below to learn how to add the Mention
plugin to the comment editor:
const MentionPlugin = ClassicEditor.builtinPlugins.find(
plugin => plugin.pluginName == 'Mention'
);
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [ 'bold', 'italic', '|', 'comment' ]
},
sidebar: {
container: document.querySelector( '#sidebar' )
},
comments: {
editorConfig: {
extraPlugins: [ MentionPlugin ],
mention: {
feeds: [
{
marker: '@',
feed: [
'@Barney', '@Lily',
'@Marshall', '@Robin', '@Ted'
],
minimumCharacters: 1
}
]
}
}
}
} )
.catch( error => console.error( error ) );
Note that additional plugins need to be a part of the same build just like the main editor plugins. They do not need to be enabled in the main editor but make sure that they are in the build. Refer to the Installing plugins guide to learn more.
See comments-with-mentions
in the ready-to-use comments integration samples to find the full code sample.
# Custom date format
The comments feature allows you to set a custom date format for comments and suggestions. To enable that, pass a function to the config.locale.dateTimeFormat
property in the main editor configuration. This function is invoked with one argument: a comment or suggestion creation date.
// You can use any other library, like moment.js.
import format from 'date-fns/format';
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [ 'bold', 'italic', '|', 'comment' ]
},
sidebar: {
container: document.querySelector( '#sidebar' )
},
locale: {
dateTimeFormat: date => format( date, 'DD/MM/YYYY' )
}
} )
.catch( error => console.error( error ) );