CKEditor 5 协作功能中的注释

注释是协作功能系统的一部分。它们是与评论和建议相对应的 UI 元素（“气泡”）。

# 附加功能信息

评论和跟踪更改等功能会创建表示其数据的视图（“气泡”）。这种视图称为注释。它们被添加到注释插件中并存储在其中。然后，UI 机制（如侧边栏或内联注释）使用注释视图来填充自身并创建各种类型的用户体验。

使用注释系统和提供的 API，您可以

• 在提供的显示模式（侧边栏或内联注释）之间进行选择.
• 自定义评论和跟踪更改插件创建的注释.
• 为您的插件提供自定义注释。
• 为注释提供自定义 UI（例如，带有您自己的显示逻辑的自定义侧边栏）。

# 注释自定义

您可以从多个级别修改注释的外观

• 主题自定义.
• 配置，包括评论输入字段配置.
• 为默认视图提供自定义模板.
• 为注释提供自定义视图.

参考链接的指南，了解有关如何为 CKEditor 5 的协作功能自定义注释的更多信息。

# API 概述

所有外部操作的主要入口点应为 Annotations 插件。它存储所有编辑器的 注释 并允许对其进行操作。

在此示例中，将使用 Annotation 插件 API 来显示自定义注释。为此，您应该创建一个注释将附加到的目标元素。在 参考 指南中创建的 index.html 文件中，在编辑器数据容器旁边添加以下静态 <div> 元素

<!-- ... -->
<div id="editor"></div>
<div id="my-annotation-target">Custom annotation target</div>
<!-- ... -->

现在，在项目的 main.js 文件中，请添加以下代码来创建注释

import { View } from 'ckeditor5';

/* ... */

ClassicEditor
    .create(document.querySelector('#editor'), editorConfig)
    .then( editor => {
        // Get the annotations repository.
        const annotations = editor.plugins.get( 'Annotations' );

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

        class AnnotationInnerView extends View {
            constructor() {
                super();
                this.setTemplate( {
                    tag: 'div',
                    children: [
                        'Annotation text'
                    ]
                } );
            }
        }

        const annotationTarget = document.getElementById( 'my-annotation-target' );
        const annotationView = annotations.createAnnotationView( editor.locale, new AnnotationInnerView() );

        const annotation = annotations.createAnnotation( {
            view: annotationView,
            target: annotationTarget,
            type: 'comment'
        } )

        annotations.add( annotation );
    } );

运行项目时，您应该会看到“自定义注释目标”元素显示在编辑器下方。您还应该看到注释视图，其中“注释文本”显示在侧边栏中。