如何解决Angular中CKEditor 5编辑器外评论解决后标记未移除问题

核心原因 #

页面回退再返回时，CKEditor实例要么被复用、要么重新初始化时未正确同步最新的评论状态，导致已解决评论对应的注解按钮残留。

具体解决步骤 #

1. 组件激活时同步最新评论状态 #

在组件初始化或路由激活时，拉取后端存储的最新评论状态，清空CKEditor现有评论后，仅重新添加未解决的评论：

import { Component, OnInit, ViewChild } from '@angular/core';
import { CKEditorComponent } from '@ckeditor/ckeditor5-angular';
import { CommentService } from './comment.service'; // 自定义的评论数据服务

@Component({
  selector: 'app-editor-page',
  templateUrl: './editor-page.component.html'
})
export class EditorPageComponent implements OnInit {
  @ViewChild(CKEditorComponent) editorComp!: CKEditorComponent;
  editorContent = '';

  constructor(private commentService: CommentService) {}

  ngOnInit(): void {
    // 页面加载/返回时拉取最新评论
    this.commentService.getLatestComments().subscribe(comments => {
      if (!this.editorComp.editor) return;
      
      const commentsPlugin = this.editorComp.editor.plugins.get('Comments');
      // 清空所有残留评论
      commentsPlugin.removeAllComments();
      // 仅添加未解决的评论
      comments.forEach(comment => {
        if (!comment.isResolved) {
          commentsPlugin.addComment(comment.content, comment.range);
        }
      });
    });
  }
}

2. 监听路由变化强制刷新评论UI #

针对路由回退场景，监听路由结束事件，手动清理已解决的评论并刷新UI：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

// 在组件构造函数中添加路由监听
constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    if (!this.editorComp?.editor) return;
    
    const commentsPlugin = this.editorComp.editor.plugins.get('Comments');
    // 筛选出已解决的评论ID并移除
    const resolvedIds = commentsPlugin.getComments()
      .filter(c => c.isResolved)
      .map(c => c.id);
    
    resolvedIds.forEach(id => commentsPlugin.removeComment(id));
  });
}

3. 组件销毁时清理评论状态 #

若组件采用路由复用策略，在组件销毁时清空CKEditor的评论状态，避免下次复用残留：

import { OnDestroy } from '@angular/core';

export class EditorPageComponent implements OnInit, OnDestroy {
  // ...其他代码

  ngOnDestroy(): void {
    if (this.editorComp?.editor) {
      const commentsPlugin = this.editorComp.editor.plugins.get('Comments');
      commentsPlugin.removeAllComments();
    }
  }
}

4. 解决评论时确保状态持久化 #

用户点击解决评论时，先更新后端存储的状态，再操作CKEditor的UI，保证数据一致性：

// 解决评论的方法
resolveComment(commentId: string): void {
  // 先更新后端状态
  this.commentService.markCommentAsResolved(commentId).subscribe(() => {
    // 再同步CKEditor UI
    const commentsPlugin = this.editorComp.editor.plugins.get('Comments');
    commentsPlugin.removeComment(commentId);
  });
}

额外注意事项 #

• 确认使用的CKEditor 5评论插件为最新版本，旧版本可能存在状态同步的已知bug
• 若使用CKEditor的Context管理多编辑器实例，需同步更新Context的评论状态

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