CKEditor 5 : Unable to add multiple attributes to 'img' tag

Question

I have implemented a custom math plugin and integrated it into ck5. this plugin will convert math latex to image equation and I'm able to render the converted math equation image into a ck5 editor using the below code.

editor.model.change(writer => {
  const imageElement = writer.createElement('image', {
    src: data.detail.imgURL
  });
  editor.model.insertContent(imageElement, selection);
});

Still here everything is working fine. when i'm trying to store original latex equation value in image tag as custom attribute (attribute name is data-mathml ). It strips out custom attributes. So I have gone through the documentation and tried but was not able to add the custom attribute.

Below is my code :

class InsertImage extends Plugin {

    init() {
        const editor = this.editor;
        const view = editor.editing.view;
        const viewDocument = view.document;

        // Somewhere in your plugin's init() callback:
        view.addObserver( ClickObserver );

        editor.ui.componentFactory.add('insertImage', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Add Equations',
                withText: true,
                tooltip: true
            });

            // Callback executed once the image is clicked.
            this.listenTo(view, 'execute', () => {
                openModel();
            });
            return view;
        });

        window.addEventListener('setDatatoCK', function(data){
            const selection = editor.model.document.selection;
            editor.model.change( writer => {
                 const imageElement = writer.createElement( 'image', {
                    src: data.detail.imgURL,
                    'data-mthml': data.detail.latexFrmla,
                } );
                editor.model.insertContent( imageElement, selection );
            } );
        })

        this.listenTo( editor.editing.view.document, 'click', ( evt, data ) => {
            if ( data.domEvent.detail == 2 ) {
                editorToPopupdoubleClickHandler( data.domTarget, data.domEvent );
                evt.stop();
            }
        }, { priority: 'highest' } );


    }
};

I want to add multiple attributes to the image tag. What should I do to add multiple attributes?

(Note: I'm able to create a new custom tag (tag named "math") with multiple attributes but not for image tag)

Please help me with this. this blocker for me.

Methods tried: In order to achieve this, I have created one custom tag with multiple attributes and append image tags under this custom tag. It's working fine as expected but I want to add multiple attributes to image tag not with the custom tag.

✔️ Expected result

❌ Actual result

📃 Other details

• Browser: Google Chrome Version 78.0.3904.108 (Official Build) (64-bit)
• OS: macOS Mojave 10.14.6
• CKEditor version: CKEditor 5
• Installed CKEditor plugins: ckeditor5-editor-classic,ckeditor5-image,ckeditor5-essentials,ckeditor5-basic-styles,ckeditor5-core,ckeditor5-ui

---

Answer 1

Hope you've already found a solution to this answer. After spending several hours on searching a solution to a similar problem, I've made it working. See below:

// you have to import the insertImage fn to be able to override default imageinsert fn
import { insertImage } from '@ckeditor/ckeditor5-image/src/image/utils.js'

// this method HAVE to be automatically called when ckeditor is onready.
// You can add custom eventlistener or on the html tag just define listener:
// in Vue2 we used to do like this: <ckeditor @ready="someFnOnCkEditorReadyState()" />
someFnOnCkEditorReadyState() {
    // as for img tag the options supported by ckeditor is very limited, we must define our properties to extend the used schema
    editor.model.schema.extend('image', { allowAttributes: ['data-mathml'] })

    // add conversion for downcast
    editor.conversion.for('downcast').add(modelToViewAttributeConverter('data-mathml'))

    // add conversion for upcast
    editor.conversion.for('upcast').attributeToAttribute({
        view: {
            name: 'image',
            key: 'data-mathml',
        },
        model: 'data-mathml',
    })
}

// then you have to implement your custom image insert method
// from now on this will be your default insertImage fn
// this modification might require other modifications for example to add a custom image browser button to the toolbar
otherFnToInsertImg() {
    insertImage(editor.model, {
        src: image.url,
        'data-mathml': 'here comes the magic',
    })
}

Hope it helps someone to save some hours. ;)