'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 |
|---|
