CKEditor5自定义插件如何监听元素点击并获取comment-id属性

现有代码需要先修正的核心问题 #

• 模型属性赋值逻辑不匹配：CommentCommand.execute中直接把包含id和value的整个options对象存为comment模型属性值，序列化后无法在视图转换时正常拆解出评论id，最终生成的DOM节点comment-id属性值异常。
• 视图转换函数API调用冗余：原来的view回调中嵌套writer.writer.createAttributeElement是错误写法，CKEditor传入回调的第二个参数本身就是视图层writer，不需要二次嵌套。
• 点击监听未正确定位目标元素：直接监听视图文档click事件时，没有通过原生DOM事件的冒泡机制匹配带评论标记的自定义元素，导致无法拿到目标节点的属性值。
• 残留的debugger断点、无关的focus状态打印可以直接移除，不影响核心功能运行。

具体调整步骤 #

1. 规范模型属性的存储结构 #

把原来存在comment模型属性里的值改成可序列化的结构化字符串，不要直接存复杂对象，避免内容序列化时的数据丢失：

• 工具栏按钮触发命令时，移除多余的value字段，直接把用户生成的id传给命令：

view.on('execute', async () => {
  editor.editing.view.focus()
  const id = await config.callback()
  editor.execute('comment', { id })
})

• 命令执行时统一拼接带id的结构化属性值，保证折叠/非折叠选区的赋值逻辑一致：

model.change(writer => {
  const ranges = model.schema.getValidRanges(selection.getRanges(), 'comment')
  const commentAttrValue = `comment:${options.id}`

  if (selection.isCollapsed) {
    const position = selection.getFirstPosition()
    if (selection.hasAttribute('comment')) {
      // 原有的移除属性逻辑保持不变
      const isSameHighlight = value => {
        return value.item.hasAttribute('comment') && value.item.getAttribute('comment') === this.value
      }
      const highlightStart = position.getLastMatchingPosition(isSameHighlight, { direction: 'backward' })
      const highlightEnd = position.getLastMatchingPosition(isSameHighlight)
      const highlightRange = writer.createRange(highlightStart, highlightEnd)
      writer.removeAttribute('comment', highlightRange)
      writer.removeSelectionAttribute('comment')
    } else if (options.id) {
      // 统一传入结构化的属性值
      writer.setSelectionAttribute('comment', commentAttrValue)
    }
  } else {
    for (const range of ranges) {
      writer.setAttribute('comment', commentAttrValue, range)
    }
  }
})

• 修正视图转换的回调逻辑，从结构化属性值里拆解出真实id生成DOM属性：

editor.conversion.attributeToElement({
  model: 'comment',
  // 回调参数：第一个是模型层存的属性值，第二个是视图writer
  view: (commentValue, viewWriter) => {
    const commentId = commentValue.split(':')[1]
    return viewWriter.createAttributeElement(
      'comment',
      {
        'comment-id': commentId,
        class: 'ck-comment-marker'
      },
      { priority: 5 }
    )
  }
})

2. 实现点击监听获取comment-id #

CKEditor自带的视图文档click事件可以直接拿到封装好的原生DOM事件对象，不需要额外绑定原生监听器（避免编辑器销毁时的内存泄漏）：

editor.editing.view.document.on('click', (evt, domEventData) => {
  // domEventData.domEvent 就是原生MouseEvent对象
  const clickTarget = domEventData.domEvent.target
  // 向上冒泡查找匹配的自定义评论元素
  const commentDomNode = clickTarget.closest('comment[comment-id]')
  if (commentDomNode) {
    // 直接读取对应的comment-id属性
    const targetCommentId = commentDomNode.getAttribute('comment-id')
    // 在这里执行业务逻辑，比如打开对应评论详情、定位评论位置等
    console.log('点击的评论ID：', targetCommentId)
  }
})

注意事项 #

• 不要直接在编辑器的DOM容器上绑定原生click事件，通过CKEditor内置的视图事件系统绑定的监听，会在编辑器实例销毁时自动解绑，不会残留全局事件引用。
• 模型层存储的自定义属性值必须是可序列化的纯字符串/数字，不能直接存复杂对象，否则CKEditor在做内容快照、导出HTML、撤销重做时会出现数据丢失的问题。

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