Can not write text at left align after adding Image with a caption in Froala editors

Question

Steps to reproduce the issue::

1. Open the froala editor on https://www.froala.com/wysiwyg-editor.
2. Remove everything in the editor.
3. Insert an image.
4. Add a caption to the image.
5. Click outside the image and try to type.

Issue: After adding image caption, If write any text then it always written inside the image area[blue color]

Video:

In Froala: https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085

Can anyone help me?

Fraser

Any update guys? – Fraser

was unable to reproduce the issue. I was able to write text after captioning the image and left align it as well – Clomp

Thanks, @Clomp for the reply. I have added more info in the description. Can you please check? I am still able to reproduce the issue. – Fraser

In relation to bounty, please see my answer below which provides a viable solution with link to credible source (vendor website docs) and working sample (codepen rather than snippet). – Tolbooth

My answer now updated to current release - displays the required centering. – Tolbooth

Answer 1

If you look at your browser's dom inspector you will see that erasing the content and adding the image leaves you with one element wrapping the image and caption, and therefore no-where else to set focus to continue typing. The quickinsert feature also fails to show as there are no block boundaries to trigger it.

Froala Editor offers a decent events API, and there is a workaround via the 'image.inserted' event which fires when an image element is added into the editor. The code below listens for this event and inserts a new para element immediately after Froala's wrapping elements around the image. When typed, your caption text is part of Froala's wrapper around the image, leaving this new para ready to accept focus and let you type into it.

$('#yourselector').on('froalaEditor.image.inserted', function (e, editor, $img, response) {

$img.after("<p>Type something here</p>"); // insert a new para or div here

});

Note the downside of the simple workaround is that you get extra content injected, but the benefit hopefully outweighs that for your use-case.

This is a plain JS solution which hopefully you can adapt for your environment.

I have previously failed to add JS snippets for Froala to SO so provide this codepen working example.

Tolbooth

Thanks for providing codepen. I have checked but there is some problem in that example. 1) After adding the image in editors, it always appears at left side. 2) Image caption should be the move when moving the image.[REGRESSION ISSUE] If I will implement your solution then I am facing two issue. As per my understanding its not correct solution. Right? I hope you understand. Can you please suggest me the better solution? – Fraser

Froala references now updated to the current release (2.8.4). – Tolbooth

Thanks, man. It's working properly. I had already tried $image.after but it is not fixed due froala version. – Fraser

Answer 2

Is this what you are looking for? The text is after the image caption and not inside the image area [blue bordered].

Semilunar

I already described reproducing steps in the description. Did you follow that step? Try to reproduce the same as mention above? – Fraser