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

时间:2022-06-25
本文章向大家介绍百度编辑器UEditor上传视频的功能Bug,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

☁ 背景介绍

  • 今天在网站后台的文章列表进行添加视频的测试操作时,发现上传后页面显示空白 然后通过网上资源查询和测试,在此做一下笔记,希望能帮到各位…

♘ 解决方案、分析

> 注意:
	测试的视频格式为 .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的人操作还好,不适用于普通后台操作用户!

☞ 附录

  1. 百度编辑器UEditor不能插入视频的解决方法
  2. 修复百度编辑器插入视频的bug,可实时预览视频,可修改到支持手机查看视频