将类添加到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

在decorators和callback内部使用callback函数，使用setTimeout函数检查urls的有效类列表。

检查jsFiddle 。 有关更多信息，请参阅Links中的CKEditor5手动装饰器，并请确认安装了@ckeditor/ckeditor5-link的Link插件。

希望这会有所帮助。

谢谢

Answer 2

解决方案的关键在于上行转换器-我最终偶然发现： 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'
})

Answer 3

如果要定义自定义类，请在字段配置中查找“ 自定义编辑器JS样式集” ，然后输入.js文件的路径。

在此文件中，您可以定义您的自定义样式，如下所示：

CKEDITOR.stylesSet.add
( 'mystyles', 
    [ 
        { name: 'Bootstrap Blockquote', 
          element: 'blockquote', 
          attributes: { 'class': 'blockquote' }
        },
    ] 
);

还要确保已启用“样式”工具栏项

您还应该在此处使用编辑器的样式功能签出样式