百度编辑器UEditor上传视频的功能Bug

https://cloud.tencent.com/developer/article/1459411
百度编辑器UEditor上传视频的功能Bug
2019-07-08阅读 3.6K0
☁ 背景介绍
今天在网站后台的文章列表进行添加视频的测试操作时，发现上传后页面显示空白
然后通过网上资源查询和测试，在此做一下笔记，希望能帮到各位…
♘ 解决方案、分析

注意：
测试的视频格式为 .mp4
鄙人使用的 UEditor 版本为 【1.4.3.3 PHP版本（UTF-8版）】
☞ 第一种方案
修改文件 ueditor.config.js，找到大概 365行 ，将 whitList 更改为 whiteList

最后效果如下：

方案解释：
鄙人认为，官方源码发布审核时，将单词 whiteList 误删了一个字母
优点 —— 可解决上传资源为空和无法正常播放的问题
缺点 —— 编辑器中无法预览播放（即时修改确定后也是可以哦），但是可以进行布局的修改
☞ 第二种方案
修改文件 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行，注释掉以下三行代码

var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();

③. 记得需要 更新缓存 才可生效

最终效果如下：

方案解释：
直接更改了部分第三方控件源码，网友经验就是丰富
优点 —— 可解决上传资源为空和无法正常播放的问题，并且提供了预览功能
缺点 —— 改动的代码多，在编辑器中操作时只能切换到左上角源码进行修改（调整宽高或者删除操作）
如果是懂html的人操作还好，不适用于普通后台操作用户！
☞ 附录
个人习惯，选取的是第一种解决方案
其他建议：
当前两种操作方式，支持浏览器访问的正常显示，但是手机端未必成功，同时测试发现不支持 rich-text的解析使用
可推荐文章: 【富文本/渲染/显示/图文混排方案 rich-text和uparse的区别】