8

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:

ezgif com-video-to-gif

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

Can anyone help me?

Akash Gadhiya
  • 380
  • 1
  • 15

2 Answers2

0

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

enter image description here

Nikhil Zurunge
  • 716
  • 6
  • 10
  • I already described reproducing steps in the description. Did you follow that step? Try to reproduce the same as mention above? – Akash Gadhiya Sep 04 '18 at 06:21
0

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.

enter image description here

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
  • 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? – Akash Gadhiya Sep 06 '18 at 04:31
  • Froala references now updated to the current release (2.8.4). – Vanquished Wombat Sep 09 '18 at 08:39
  • Thanks, man. It's working properly. I had already tried $image.after but it is not fixed due froala version. – Akash Gadhiya Sep 10 '18 at 05:26