Froala: custom HTML template for images

Asked Aug 13 '18 at 10:15

Active Aug 13 '18 at 10:15

Viewed 367 times

This is the default HTML Froala produces for images:

<p>
 <span class="fr-img-caption fr-fic fr-dib" style="width: 300px; width: 300px;">
    <span class="fr-img-wrap">
      <img src="..."><span class="fr-inner">Image caption</span>
    </span>
 </span>
</p>

What if I want to change this HTML structure to something like

<figure>
    <img src="..." alt="">
    <figcaption>Caption</figcaption>
</figure>

So the image size, caption text and additional attributes may stay the same but the surrounding HTML tags are changed.

HTML code for image is hard-coded in image.min.js that comes with Froala, so the ideal solution would be to have an option to specify a html template for images, but since Froala does not provide it in the current version - I am looking for other options, any help will be appreciated.

asked Aug 13 '18 at 10:15

Alex Paramonov

2,630
2
23
27

I am thinking about the following options: 1) unminify `image.min.js` and change the HTML there, but that will break future updates of Froala 2) catch `froalaEditor.image.loaded` event and update image HTML with jquery using `replaceWith` 3) update entire Froala HTML by replacing image with my code upon form submit – Alex Paramonov Aug 13 '18 at 10:18
Did you manage to achieve that? – Ilias Kouroudis Jul 29 '19 at 07:41
No, unfortunately – Alex Paramonov Jul 29 '19 at 11:11
Also looking a solution for this. Froala still using spans in 2020 – Shnigi Jun 01 '20 at 13:33

Froala: custom HTML template for images

0 Answers0