ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.48k stars 3.7k forks source link

How to add `onmouseover` attributes to links using automatic decorators in CKEditor 5 (v36.0.1)? #17129

Open datadevmobiledev opened 3 weeks ago

datadevmobiledev commented 3 weeks ago

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:

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!

skydogtk commented 2 weeks ago

I am interested in the answer to this question.