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

时间:2018-08-27 13:38:06

标签: angularjs froala

重现此问题的步骤:

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

问题:添加图片标题后,如果写了任何文字,则始终写在图片区域内[蓝色]

视频:

ezgif com-video-to-gif

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

有人可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

这是您要找的东西吗?文本在图像标题之后,并且不在图像区域[蓝色边框] 之内。

enter image description here

答案 1 :(得分:0)

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

Froala编辑器提供了一个体面的事件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解决方案,希望您可以适应您的环境。

我以前无法为SO添加Froala的JS代码片段,因此请提供此codepen working example

enter image description here