'Change the model representation for all insert images to add custom classes

I was trying to implement custom image upload using elFinder by studio42 following this guide: https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor-5

Everything works as I would like except how the image is represented.

Once I have recovered the urls of the images I execute the command:

editor.execute("imageInsert", {
  source: urls,
});

which correctly adds images to the editor but does it like this:

<!-- WHAT IT DOES -->
<figure class="image">
    <img src="https://placehold.it/500x200">
</figure>

what I would like is for them to be printed as:

<!-- WHAT I WANT -->
<img src="https://placehold.it/500x200" alt="Alt text" class="customClass">

I seem to have understood that the way in which images are represented depends on the ImageBlockEditing or ImageInlineEditing plugins, but I haven't figured out how I can "override" them to get the result i want.

I tried to pass customAttribute as said in: https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image_insertimagecommand-InsertImageCommand.html

editor.execute("imageInsert", {
    source: [
        {
            src: url,
            alt: "Alt text",
            customAttribute: "custom",
            id: "customId",
        },
    ],
});

But i still i get:

<figure class="image">
    <img src="https://placehold.it/500x200" alt="Alt text">
</figure>

Any tips will be appreciated. Thank you in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source