Adding classes to links in CKeditor
The key to the solution is in the upcast converter - I eventually stumbled on to: https://stackoverflow.com/a/55019124/803804
This led me to realise you can pass a callback into the attributeToAttribute converter https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_conversion_upcasthelpers-UpcastHelpers.html#function-attributeToAttribute
Really simple in the end:
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'
})
Use callback
function in decorators
and inside the callback
, use setTimeout
function to check the valid class list in the urls
.
Check the jsFiddle. Refer CKEditor5 manual decorators in Links for more and please confirm the Link
plugin installed @ckeditor/ckeditor5-link
Hope this will help.
Thank You