ckeditor5 图片不能编辑 图片不失去焦点 ckeditor5图片bug ckeditor5遇到的坑 ckeditor列表不管用

遇到的问题

首先声明一下,我面临的问题,以及我所处的环境:当前项目是后台管理系统项目,
主要用的是vue、iview、ckeditor5等。新建demo中ckeditor5运行完好,
功能都很棒,可是!搬到项目中,竟然出现很多bug,主要问题有以下几个:
1、上传图片问题:图片上传后不会出现编辑图片的按钮,一直处于聚焦状态;
2、第一个问题解决后,又发现……,图片可编辑了,但是!!!如果当前编辑器内容为空的话,直接插入图片,图片可变大小位置,可是一直处于聚焦状态,如果直接输入文字,则图片消失,最关键的是官方的demo也是如此,真是让人头秃!
3、最后还有一个小小的问题就是添加有序列表和无序列表的问题!(小我也解决了几个小时,看来智商是不够用了)

解决办法

1、第一个问题:
经过我傻傻的试了半天,终于的,找到了一个自己不能解释的解决办法,尴尬,但是管用!就是我发现如果不把编辑器组件代码ckeditor标签包含在iview的组件标签内,这个问题就不存在了!!!! 直接包含在h5标签内比如div内部,但绝对不能放在Menu等iviewUI框架标签内!如下图:

在这里插入图片描述
2、第二个问题:
说多了都是泪,直接给官方提了issues, 给的回复:
Hello, you should create a new paragraph if you want to continue editing. You can achieve it by pressing Enter while an image is focused to insert a paragraph after the image or Shift + Enter to insert a paragraph before the image.
译文:你好,如果你想继续编辑,你应该创建一个新的段落。您可以通过按Enter键来实现这一点,当图像被聚焦时,您可以在图像之后插入一个段落,或者按Shift + Enter键在图像之前插入一个段落。

3、第三个问题
因为iview.css清除了ul li ol 的margin和padding,你的base样式可能有list-style:none,记得去掉!!

直接修改下iview dist目录下 iview.css中的清除所有标签的magin和padding,把ul li ol去掉即可

博主不才,只能用这种愚笨的方法解决,如有高见,欢迎指教;-)

猜你喜欢

转载自blog.csdn.net/Taurus_0811/article/details/95210177