我对在 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'
})
最佳答案
解决方案的关键在于向上转换 - 我最终偶然发现: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'
})
关于javascript - 在 CKeditor 中向链接添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57906914/