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

Question

重现问题的步骤::

1. 打开 https://www.froala.com/wysiwyg-editor 上的 froala 编辑器.
2. 删除编辑器中的所有内容。
3. 插入图片。
4. 为图片添加标题。
5. 点击图像外部并尝试输入。

问题:添加图像标题后，如果写入任何文本，那么它总是写在图像区域内[蓝色]

视频:

在弗罗阿拉: https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085

有人可以帮助我吗？

Answer 1

如果您查看浏览器的 dom 检查器，您会发现删除内容并添加图像后，您将只剩下一个元素来包裹图像和标题，因此没有其他地方可以设置焦点以继续键入。快速插入功能也无法显示，因为没有 block 边界来触发它。

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

});

请注意，简单解决方法的缺点是您会注入(inject)额外的内容，但对于您的用例来说，其好处有望超过。

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

我之前未能将 Froala 的 JS 片段添加到 SO，因此请提供此 codepen working example 。