百度编辑器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的人操作还好,不适用于普通后台操作用户!
☞ 附录
- 个人习惯,选取的是第一种解决方案
- 其他建议:
当前两种操作方式,支持浏览器访问的正常显示,但是手机端未必成功,同时测试发现不支持
rich-text
的解析使用 可推荐文章: 【富文本/渲染/显示/图文混排方案 rich-text和uparse的区别】 - 参考文章:
- 桌面白屏(Active故障)修复批处理
- ASM 翻译系列第十三弹:ASM 高级知识 - Forcing the issue
- ASM 翻译系列第十四弹:ASM Internal Rebalancing act
- DIY网站统计:WordPress排除管理员评论及精准友链数的方法
- Linux运维工程师:30道面试题整理
- ASM 翻译系列第十五弹:ASM Internal ASM File Directory
- ASM 翻译系列第十六弹:ASM Internal ASM Active Change Directory
- ASM 翻译系列第十七弹:ASM Internal ASM Disk Directory
- Windows 7下获取System权限
- ASM 翻译系列第十八弹:ASM Internal ASM file number 5
- 菜单式Shell运维脚本调试小记
- 优化Postgres-x2 GTM
- 启用某些Linux发行版的root帐号
- Linux中的完美截图工具:Deepin-ScreenShot
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互
- 数据结构算法操作试题(C++/Python)——串联所有单词的子串
- TypeScript 实战算法系列(九):实现向量与矩阵
- TypeScript 实战算法系列(十):实现动态规划
- 数据结构算法操作试题(C++/Python)——下一个排列
- 最新Spring整合MyBatis详解教程
- 数据结构算法操作试题(C++/Python)——搜索插入位置
- 数据结构算法操作试题(C++/Python)——报数
- Java List.add()方法:向集合列表中添加对象
- Linux下查看NVIDIA的GPU使用情况
- 数据结构算法操作试题(C++/Python)——有效的数独
- Java List.addAll()方法:添加所有元素到列表中
- HDFS的Shell操作(开发重点)
- 数据结构算法操作试题(C++/Python)——字符串相乘
- Java基础知识笔记四(详细)