javascript - 在 CKeditor 中向链接添加类

Question

我对在 ckeditor5 中向链接添加类有一些具体要求 - 我已经阅读了文档并尝试了多种方法，但我仍在努力实现我想要的。我的要求是:

1. 所有添加的链接(无论是使用链接 UI 还是通过粘贴)都必须分配一个类。如果没有分配类或分配的类不在有效类列表中，则该类应设置为 defaultClass

2. 链接类必须在有效链接类列表中

我已经构建了一个包含有效类列表的下拉列表并将其添加到链接界面

这是我目前的代码:

    const { editor } = this

    const linkClasses = editor.config.get('link.options.classes')
    const defaultLinkClass = editor.config.get('link.options.defaultClass')

    editor.model.schema.extend('$text', { allowAttributes: 'linkClass' })

    editor.conversion.for('downcast').attributeToElement({
      model: 'linkClass',
      view: (attributeValue, writer) => writer.createAttributeElement('a', { class: attributeValue }, { priority: 5 }),
      converterPriority: 'low'
    })

    editor.conversion.for('upcast').attributeToAttribute({
      view: {
        name: 'a',
        key: 'class'
      },
      model: 'linkClass',
      converterPriority: 'low'
    })

Answer 1

解决方案的关键在于向上转换 - 我最终偶然发现:https://stackoverflow.com/a/55019124/803804

这让我意识到您可以将回调传递给 attributeToAttribute 转换器 https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_conversion_upcasthelpers-UpcastHelpers.html#function-attributeToAttribute

最后真的很简单:

editor.conversion.for('upcast').attributeToAttribute({
  view: {
    name: 'a',
    key: 'class'
  },
  model: {
    key: 'linkClass',
    value: viewElement => {
      if(this.classes.includes(viewElement.getAttribute('class'))) {
        return viewElement.getAttribute('class')
      } else {
        return this.defaultClass
      }
    }
  },
  converterPriority: 'low'
})