☁ 背景介绍
- 今天在网站后台的文章列表进行添加视频的测试操作时,发现上传后页面显示空白
然后通过网上资源查询和测试,在此做一下笔记,希望能帮到各位…
♘ 解决方案、分析
> 注意:
测试的视频格式为 .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的区别】 - 参考文章: