CKEditor5编辑器外添加评论 报Cannot read properties of null错误

问题复现场景 #

• 基于Angular框架实现CKEditor5编辑器外评论能力，参考官方示例开发完成后，点击外部添加评论按钮时评论弹窗不弹出，控制台抛出上述类型错误。

排查&修复步骤 #

按优先级从高到低排查：

1. 修复点击按钮导致编辑器失焦丢选区的问题（最高发原因）
   浏览器默认行为会在点击非编辑器区域的按钮时，清空编辑器内的文本选中状态，此时评论插件尝试读取选中范围关联的marker名称时，拿到的marker值为null，直接触发报错。
   • 第一步先给按钮加mousedown事件拦截，阻止默认失焦行为，不要等click事件触发再处理：

     <!-- 外部添加评论按钮模板 -->
     <button (mousedown)="handleAddCommentMouseDown($event)" (click)="handleAddCommentClick()">
       添加评论
     </button>
     

     handleAddCommentMouseDown(e: Event) {
       // 阻止默认行为避免编辑器失焦清空选区
       e.preventDefault();
     }
     
     handleAddCommentClick() {
       const commentsRepo = this.editor.plugins.get('CommentsRepository');
       const selection = this.editor.model.document.selection;
       // 增加选区合法性校验，没有选中文本时直接提示
       if (selection.isCollapsed) {
         window.alert('请先选中需要添加评论的文本内容');
         return;
       }
       // 校验通过再执行打开评论弹窗逻辑
       commentsRepo.openNewCommentThread(selection.getFirstRange());
     }
     

2. 校验插件加载与版本一致性
   • 编辑器初始化完成后，在ready回调中打印this.editor.plugins.get('CommentsRepository')，如果返回值为null，说明评论插件未正确注册：
     • 确认所有协作类插件（Comments、RealTimeCollaborativeComments等）的版本号，和CKEditor5核心包版本完全一致，版本不匹配会导致插件上下文挂载失败。
     • 确认编辑器配置项中comments配置项未遗漏，不要在自定义插件列表中漏掉CommentsRepository插件。
3. 校验传入的range有效性
   如果是手动构造评论绑定的文本范围，不要复用文档更新前缓存的历史range对象：编辑器内容发生增删改后，旧range对应的文档节点可能已经被移除，传入失效range会导致插件无法找到对应节点读取name属性。每次添加评论前，必须基于当前文档的实时选区生成新的range对象。
4. Angular生命周期专属校验
   • 确认外部评论按钮的点击事件绑定，是在编辑器ready事件触发完成后执行的，不要在编辑器实例初始化完成前绑定事件。
   • 如果编辑器容器用*ngIf控制显隐，要在容器销毁时解绑评论按钮的事件，避免在编辑器实例已经销毁后触发评论逻辑。
   • 如果用了OnPush变更检测策略，打开评论弹窗后要手动触发markForCheck()，避免弹窗组件因未检测到数据更新无法渲染。

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