注释配置

调整 CKEditor 5 协作功能的配置是改变协作功能视图行为的另一种简单方法。

# 协作功能配置

可在 评论功能编辑器配置、跟踪更改功能编辑器配置 和 侧边栏功能编辑器配置 指南中找到所有可用配置选项的完整文档。

请注意，评论配置也适用于建议线程中的评论。

# 评论编辑器配置

用于添加和编辑评论的编辑器也是 CKEditor 5 实例。默认情况下，它使用以下插件

• Essentials,
• Paragraph,

这些插件允许使用一些基本样式创建评论内容。

但是，可以扩展评论编辑器配置并添加一些额外的插件，甚至可以覆盖整个配置并替换插件列表。可以使用主编辑器配置中的 comments.editorConfig 属性修改评论编辑器配置。

请参阅以下示例，了解如何将 Mention 插件添加到评论编辑器。

import {
    ClassicEditor,

    // Make sure to import the plugins you want to use for the comments editor.
    Bold, Italic, Mention
} from 'ckeditor5';

// ...

const editorConfig = {
    // ...

    toolbar: {
        items: [
            'undo', 'redo',
            '|', 'comment', 'commentsArchive',
            '|', 'heading',
            '|', 'bold', 'italic',
            '|', 'link',
            '|', 'bulletedList', 'numberedList'
        ]
    },
    sidebar: {
        container: document.querySelector( '#sidebar' )
    },
    comments: {
        editorConfig: {
            extraPlugins: [ Bold, Italic, Mention ],
            mention: {
                feeds: [
                    {
                        marker: '@',
                        feed: [
                            '@Barney', '@Lily',
                            '@Marshall', '@Robin', '@Ted'
                        ],
                        minimumCharacters: 1
                    }
                ]
            }
        }
    }

    // ...
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig);

请注意，其他插件需要与主编辑器插件位于同一个包中。默认情况下，ckeditor5 包包含所有开源插件，而 ckeditor5-premium-plugins 包则包含所有高级插件。

# 侧边栏配置

侧边栏配置允许设置侧边栏的容器元素并调整定位机制。查看 侧边栏配置 API 文档以了解所有可用选项。

# 使用示例

// ...

const editorConfig = {
    // ...

    comments: {
        // Show the first comment and the two most recent comments when collapsed.
        maxCommentsWhenCollapsed: 3,
        // Make comments shorter when collapsed.
        maxCommentCharsWhenCollapsed: 100,
        // Allow for up to 3 comments before collapsing.
        maxThreadTotalWeight: 600,

        // You may set the comments editor configuration.
        // In this case, use the default configuration.
        editorConfig: {}
    },
    sidebar: {
        container: document.querySelector( '#sidebar' ),
        preventScrollOutOfView: true
    },

    // ...
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig);

使用 comments.CommentThreadView 和 comments.CommentView 配置选项在 注释自定义视图 指南中有所描述。

# 自定义日期格式

评论功能允许您为评论和建议设置自定义日期格式。要启用此功能，请将函数传递给主编辑器配置中的 locale.dateTimeFormat 属性。此函数会使用一个参数调用：评论或建议的创建时间。

// You can use any other library, like moment.js.
import format from 'date-fns/format';

// ...

const editorConfig = {
    // ...

    locale: {
        dateTimeFormat: date => format( date, 'dd/MM/yyyy' )
    }

    // ...
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig);