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

Question

重现问题的步骤::

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

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

视频:

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

谁能帮我？

Answer 1

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

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

});

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

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

我之前未能将 Froala 的 JS 片段添加到 SO，因此请提供此codepen 工作示例。