在 Froala 编辑器中添加带有标题的图像后，无法在左对齐处写入文本

Question

重现问题的步骤::

在 https://www.froala.com/wysiwyg-editor 上打开 froala 编辑器。
删除编辑器中的所有内容。
插入图片。
为图片添加说明。
单击图像外部并尝试键入。

问题：添加图片标题后，如果写任何文字，它总是写在图片区域内[蓝色]

视频：

芙罗拉： https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085

谁能帮帮我？

Answer 1

这是您要找的吗？文字 在图片说明 之后 不在图片区域 [蓝色边框]。

Answer 2

如果您查看浏览器的 dom 检查器，您会发现擦除内容并添加图像会留下一个元素来包裹图像和标题，因此 no-where else 用于设置焦点继续输入。快速插入功能也无法显示，因为没有块边界可以触发它。

Froala Editor 提供了一个不错的事件 API，并且有一个解决方法是通过“image.inserted”事件，当将图像元素添加到编辑器时该事件会触发。下面的代码侦听此事件并在 Froala 环绕图像的元素之后立即插入一个新的 para 元素。输入时，您的标题文本是 Froala 图像包装的一部分，让这个新段落准备好接受焦点并让您输入。

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

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

});

请注意，简单解决方法的缺点是您会注入额外的内容，但对于您的 use-case。

这是一个普通的 JS 解决方案，希望您可以适应您的环境。

我之前未能将 Froala 的 JS 片段添加到 SO，所以提供这个 codepen working example。

在 Froala 编辑器中添加带有标题的图像后，无法在左对齐处写入文本

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

angularjs

froala