CKEditor 5如何加载含建议与追踪更改的编辑器数据？

要成功加载包含追踪更改（Tracked Changes）和建议标记（Suggestion Markers）的内容，核心是确保编辑器启用对应插件，并正确处理数据的保存与加载逻辑，以下是具体实现方案：

前提：启用追踪更改插件 #

首先必须在编辑器配置中添加Track Changes相关插件，同时配置用户信息（追踪更改与建议标记需关联具体用户）：

DecoupledEditor
    .create( document.querySelector( '.editor' ), {
        plugins: [
            // 基础编辑插件（按需添加，如Essentials、Paragraph等）
            'Essentials', 'Paragraph', 'Bold', 'Italic',
            // 追踪更改核心插件
            'TrackChanges'
            // 若需评论功能可补充：'CommentPlugin'
        ],
        toolbar: [
            'bold', 'italic', '|', 'trackChanges', 'acceptAllSuggestions', 'rejectAllSuggestions'
        ],
        // 配置当前用户信息，用于关联建议发起者
        user: {
            id: 'user-1',
            name: 'John Doe'
        }
    } )
    .then( editor => {      
        window.editor = editor;            
        // 后续加载内容逻辑
    } )
    .catch( error => {
        console.error( error );
    } );

方案1：使用setData方法加载内容 #

若你之前通过editor.getData({ includeSuggestions: true })保存了带标记的内容（必须加includeSuggestions: true参数，否则追踪标记会被过滤），直接调用setData即可自动解析渲染标记：

// savedContent为之前保存的带追踪标记的内容
const savedContent = '<p><span data-suggestion-id="s1" data-suggestion-type="add">带建议标记的内容</span></p>';

window.editor.setData(savedContent);

方案2：初始化时直接加载内容 #

创建编辑器时，可通过initialData配置项直接传入带标记的内容，无需后续调用setData：

DecoupledEditor
    .create( document.querySelector( '.editor' ), {
        plugins: ['Essentials', 'Paragraph', 'Bold', 'Italic', 'TrackChanges'],
        toolbar: ['bold', 'italic', '|', 'trackChanges'],
        user: { id: 'user-1', name: 'John Doe' },
        // 直接传入带标记的初始化内容
        initialData: '<p><span data-suggestion-id="s1" data-suggestion-type="add">带建议标记的初始化内容</span></p>'
    } )
    .then( editor => {      
        window.editor = editor;            
    } )
    .catch( error => {
        console.error( error );
    } );

关键注意事项 #

• 保存数据必须用editor.getData({ includeSuggestions: true })，否则追踪标记会丢失，无法在加载时恢复。
• 加载时无需额外配置，只要编辑器启用TrackChanges插件，setData和initialData都会自动解析渲染建议标记与追踪更改。
• 用户信息配置需准确，否则建议标记的发起者信息无法正常显示。

内容的提问来源于stack exchange，提问作者Joey Abano