ueditor编辑器的坑(视频空白/保存无数据/无法删除/不能插入百度动态地图/有序列表显示问题)

46 篇文章 1 订阅

1、上传视频显示空白

在这里插入图片描述
修复方法:
修改ueditor.all.js文件

17769行,找到
html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
修改为:
html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));

7343,7344,7346行,找到以下三行注释掉代码:
var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();

2、只上传视频,保存不了数据,保存之后编辑器为空

在这里插入图片描述
点击保存之后,发现视频不见了。注意一下编辑器已输入的字符为0
修复方法:
修改ueditor.all.js文件,找到“creatInsertStr”方法的case ‘video’:
在这里插入图片描述
图中位置添加一个隐藏标签,用“.”作为一个占位符,这样就能保存了

<span style="display:none;">.</span>

3、不能编辑和删除

问题:退位键删除不了视频,不能再次获取鼠标光标,不能编辑及换行
修复方法:
修改ueditor.all.js文件,找到“creatInsertStr”方法的case ‘video’:(问题2那个地方后面添加一个换行标签即可)
在这里插入图片描述

还有一种情况,视频播放时空白,但有声音没图像。

原因 : video标签不支持视频的编码格式
注: 此处所说的编码格式不是指文件后缀 mp4 , RMVB , avi等 , 同一种后缀视频也会有不同编码格式

关于标签所支持的视频格式和编码:
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

4、修复不能插入百度动态地图问题

打开编辑器文件“ueditor.all.js”按以下修改
找到代码:

table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled")

在这行代码下面加一行:

table.setAttribute("style", "border-collapse:collapse;");

找到代码:

return '<table><tbody>' + html.join('') + '</tbody></table>'

修改为:

return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>'

打开编辑器配置文件“ueditor.config.js”,在whitList白名单添加

iframe: ['frameborder','border','marginwidth','marginheight','width','height','src','id'],//动态地图

5、有序列表显示问题

在这里插入图片描述
选择这些是没效果是吧
在这里插入图片描述
看一下图片路径是不存在的了,所以要把图标本地化

下载ueditor-list:
我把它放到编辑器的themes目录吧
在这里插入图片描述
搜索ueditor目录下的listiconpath,地址指向ueditor-list目录
在这里插入图片描述
再查找以下代码:

domUtils.setStyle(list, 'list-style-type', style);

替换为:

if (style === 'circle' || style === 'disc' || style === 'square' || style === 'decimal' || style === 'lower-alpha' || style === 'lower-roman' || style === 'upper-alpha' || style === 'upper-roman') {
    domUtils.setStyle(list, 'list-style-type', style);
}

如图:
在这里插入图片描述
完成。

6、上传视频播放显示没有封面问题 add by 2022.08.31

修复方法:
修改ueditor.all.js文件
在这里插入图片描述
把preload="none"改为preload=“meta”
这是使用视频中的内容作为封面,但不能自定义选帧数作为封面

现在PC端查看是能读取视频中内容作为封面了,但h5手机端还是没封面,可以再添加一个默认视频封面图参数:
在这里插入图片描述

poster="xxx.jpg"

注意:不要填写编辑器所在路径,防止暴露编辑器路径,通过编辑器的漏洞入侵网站

修改ueditor.config.js文件,xss过滤白名单,视频配置添加参数“poster”
在这里插入图片描述
完成。

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天都进步一点点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值