Report an issue

guideAnnotations in CKEditor 5 collaboration features

Annotations are a part of the collaboration features system. They are UI elements (“balloons”) that correspond to comments and suggestions.

# Additional feature information

Features like comments and track changes create views (“balloons”) that represent their data. Such a view is called an annotation. They are added to and stored in the annotations plugin. Then, UI mechanisms (like sidebars or inline annotations) use the annotation views to populate themselves and create various types of user experiences.

Using the annotations system and the provided API, you can:

# Annotations customization

There are multiple levels on which you can modify the look of annotations:

Refer to the linked guides to learn more about how to customize annotations for collaboration features of CKEditor 5.

# API overview

The main entry point for all external actions should be the Annotations plugin. It stores annotations for all editors and allows manipulating them.

// Get the annotations repository.
const annotations = editor.plugins.get( 'Annotations' );

// Add a callback fired whenever active annotations change.
annotations.on( 'change:activeAnnotations', ( evt, newAnnotations, oldAnnotations ) => {
    console.log( newAnnotations );
} );

// Add a new annotation to the collection.
import { AnnotationView } from '@ckeditor/ckeditor5-comments';
import { View } from '@ckeditor/ckeditor5-ui';

class AnnotationInnerView extends View {
    constructor() {
        this.setTemplate( { tag: 'div' } );

const annotationTarget = document.getElementById( 'my-annotation-target' );

const annotation = new Annotation( {
    view: new AnnotationView( new AnnotationInnerView() ),
    target: annotationTarget,
    type: 'comment'
} )

annotations.add( annotation );