向 CKeditor 中的链接添加类

Question

我对在 ckeditor5 中向链接添加类有一些特定要求 - 我已经阅读了文档并尝试了多种方法，但我仍然在努力实现我想要的。我的要求是：添加的所有链接（无论是使用链接 UI 还是通过粘贴）都必须分配一个类。defaultClass如果未分配类或分配的类不在有效类列表中，则应将该类设置为链接类必须在有效链接类列表中我建立了一个包含有效类列表的下拉列表并将其添加到链接界面这是我到目前为止的代码：    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

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

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

希望这会有所帮助。

Answer 2

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

在此文件中，您可以像这样定义自定义样式：

CKEDITOR.stylesSet.add

( 'mystyles', 

    [ 

        { name: 'Bootstrap Blockquote', 

          element: 'blockquote', 

          attributes: { 'class': 'blockquote' }

        },

    ] 

);

还要确保您启用了样式工具栏项

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