自定义插件ckeditor5中的单击事件

Question

我在 ckeditor5 中有一个自定义插件。 当用户单击工具栏图标时，我的插件将选定的测试转换为具有自定义属性名称注释 ID 的自定义元素。 这工作正常。 现在我想在点击元素上观看并在点击时获得评论 ID，但我不知道该怎么做。 这是我的自定义插件的代码

import uploadIcon from './message.svg'
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
import Command from '@ckeditor/ckeditor5-core/src/command'
import './comment.css'
export default class CustomFileExporerPlugin extends Plugin {
  init() {
    const editor = this.editor
    const config = editor.config.get('comment')
    console.log(editor.editing.view.document.isFocused)
    editor.editing.view.document.on('click', a => {
      console.log(a)
    })
    editor.model.schema.extend('$text', { allowAttributes: 'comment' })
    editor.conversion.attributeToElement({
      model: 'comment',
      view: (commentId, writer) => {
        debugger
        if (writer) {
          return writer.writer.createAttributeElement(
            'comment',
            {
              'comment-id': commentId,
              class: `ck-comment-marker`
            },
            { priority: 5 }
          )
        }
      }
    })
    editor.commands.add('comment', new CommentCommand(editor))

    editor.ui.componentFactory.add('comment', locale => {
      const view = new ButtonView(locale)

      view.set({
        label: 'add comment',
        icon: uploadIcon,
        tooltip: true
      })

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

      return view
    })
  }
}

class CommentCommand extends Command {
  refresh() {
    const model = this.editor.model
    const doc = model.document
    this.value = doc.selection.getAttribute('comment')
    this.isEnabled = model.schema.checkAttributeInSelection(
      doc.selection,
      'comment'
    )
  }

  execute(options = {}) {
    const model = this.editor.model
    const document = model.document
    const selection = document.selection
    const highlighter = options.value

    model.change(writer => {
      const ranges = model.schema.getValidRanges(
        selection.getRanges(),
        'comment'
      )
      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 (highlighter) {
          writer.setSelectionAttribute('comment', highlighter)
        }
      } else {
        for (const range of ranges) {
          writer.setAttribute('comment', options, range)
        }
      }
    })
  }
}

Answer 1

在渲染编辑器时，您可以使用以下代码捕获自定义插件点击事件。

const command = editor.commands.get('comment')

command.on('execute', () => { catch click event in custom plugin})