How to add `onmouseover` attributes to links using automatic decorators in CKEditor 5 (v36.0.1)?
Hello,
I am using CKEditor 5 version 36.0.1 because it is the last version compatible with Node 14.
My goal is to add onmouseover events to links during editing. I am using the automatic decorator configuration, but I keep encountering the error: domconverter-unsafe-attribute-detected.
The onmouseover attribute is being renamed to data-ck-unsafe-attribute-onmouseover.
I read about renderUnsafeAttributes in the documentation, but I am unsure how to apply this setting with automatic decorators.
Questions:
- Is it possible to add the
onmouseoverattribute to links through automatic decorators? - How can I use
renderUnsafeAttributeswith automatic decorators?
I attempted to create a plugin with the following code, but it didn't resolve the issue:
export default class AllowInteractiveAttributes extends Plugin {
init() {
const editor = this.editor;
editor.model.schema.extend( '$text', { allowAttributes: [ 'onclick', 'onmouseover' ] } );
editor.conversion.for( 'downcast' ).attributeToElement( {
model: 'Text',
view: ( modelAttributeValue, viewWriter ) => {
return viewWriter.createAttributeElement('a', { onclick: modelAttributeValue }, { renderUnsafeAttributes: ['onclick'] });
},
converterPriority: 'high',
});
}
}
Context:
The goal is to use automatic decorators to add custom event handlers (e.g., onmouseover) to links during the editing process, but these attributes are being renamed due to security policies (domconverter-unsafe-attribute-detected). I would like to understand the proper way to bypass this behavior for specific attributes.
Any help or guidance would be greatly appreciated!
Thank you!
I am interested in the answer to this question.
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
Still relevant.