重现此问题的步骤:
问题:添加图片标题后,如果写了任何文字,则始终写在图片区域内[蓝色]
视频:
在Froala中: https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085
有人可以帮助我吗?
答案 0 :(得分:0)
答案 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。