百度编辑器上传视频以及视频编辑器预览bug解决
百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基本最大的体现就是编辑器内无法预览上传的视频问题。
我搜集了网上的解决方案,发现基本都一样,大多数都是复制黏贴的答案,虽说一定程度解决了编辑器上传不显示的问题,但却造成了新的bug,例如上传视频框无法关闭,还有只要等切换源码模式再返回来又看不到预览的视频了等。
所以最后还是自己动手丰衣足食,最后终于找到了完美解决方案,在找问题的过程也发现其实百度编辑器虽然留下了bug,但这些bug完全是在预期内的,也就是给了你解决的途径,只需要能理解他们的代码根据他们的思路来就可以改成你想要的样子,关键还是理解他们的开发思路,想必这对专业的前端肯定是很简单的,奈何我并不是专业的前端,所以还是花了点时间,下面来看解决方案和bug本身的问题。
先来看具体的bug情况:
在插入视频里放入地址后,正常显示在插入视频里,这个时候是正常的
但插入后会显示下图,视频没有正常的预览,这是因为设置插入编辑器里的不是视频的代码,而是image图片的代码
这个时候如果进入源码看的话,会发现里面是空的,根本什么都没有
在进入编辑器的预览会发现之前的图片都消失了
出现这种情况是由于编辑器没有开放视频插入的代码的白名单,所以会被过xss滤掉
解决方案:
首先在ueditor.config.js文件里增加xss过滤白名单:
在这里的末尾加上下列在插入视频中使用的代码:
另外由于插入的代码不是视频,那么首先要找到插入编辑器代码的代码,位置在ueditor.all.js里,如果引用的是uedior.min.js就需要在这里找,找到以下代码:
改完这里后会发现插入视频地址后,虽然编辑器可以看到视频了,但是插入视频的窗口不能关闭了
之所以会出现这个问题是因为改动embed后,下面红框的代码无法正常找到image标签及其里面的属性导致的,这里只要注释红框的内容就可以解决插入视频框无法自动关闭的问题。
接着往下看,除开这个bug外,还有新的问题,下面我们来看看点击源码再回到编辑器预览里会发生什么。
从上面的图上可以看出,去源码里已经视频代码不会被过滤了,但是回到编辑器却是一片空白,这是怎么回事呢?
问题出在红框里的这段代码里:type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer"
type规定了flash格式,我插入的是flash所以没问题,pluginspage是提供用户flash下载地址的(有些用户没有安装flash插件或者没有及时更新),那么问题是在class里了,因为ediu-faked-video会告诉编辑器这不是一个视频,因此会删除embed里的src的链接,因此回到编辑器预览会出现白板。
网上其他的答案是把ediu-faked-video改成ediu-video,但我不建议,因为只能解决部分问题而已,还有其他的bug,例如如果上传的视频是mp4格式怎么办,另外改动的地方不止样一处,还是有问题,因此我建议改动ueditor.all.js里的下图红框部分:
这里是判断如果点击视频上传需要导入的是embed代码的情况,之前是image,我们改成了embed,因此这里switch得到的是embed的代码模板,在这里我们去掉
- type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +'
更改好后,刷新一下,我们再来看看插入视频后进入源码然后再回到编辑器预览状态下已经没有问题了,可以正常预览,红框里的代码的src内容已经不会被过滤了:
另外上传视频也可以正常运作,如果是按照网上改edui-faked那种,这里如果传的是MP4等其他格式的就会出问题。
百度编辑器上传视频以及视频编辑器预览bug解决的更多相关文章
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...
- Thinkphp5+plupload图片上传功能,支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
- jQuery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
- JS实现上传本地图片前先预览
<style type="text/css"> #preview /*这个就是预览的DIV的ID*/ { filter:progid:DXImageTransform. ...
- ajax:html5上传文件,上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...
- mvc文件上传支持批量上传,拖拽以及预览,文件内容校验等
使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_z ...
- create-react-app创建项目并用git上传至GitHub及展示预览效果
1.在本地中创建一个项目所在的文件夹 2.npm -g create-react-app 3.在此文件夹下 create-react-app react-demo (项目名) 4.cd react-d ...
- C# asp:FileUpload上传文件使用JS实现预览效果
js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...
随机推荐
- python库之mlxtend
一.安装 conda install mlxtend --channel conda-forge 具体请看参考文献一 二.入门例子 请看参考文献2上github的举例 参考文献 http://rasb ...
- ssl checker
ssl checker showThis server is vulnerable to the POODLE attack. If possible, disable SSL 3 t` POODLE ...
- Python自学:第五章 使用函数range( )
# -*- coding: GBK -*- for value in range(1,5): print(value) 输出为: 1 2 3 4
- 使用ajax怎么请求跨域资源
1.ajax中添加“xhrFields”和“crossDomain”,如: $.ajax({ url: url, data: data, type: "post", xhrFiel ...
- thinkphp DEFINED标签
DEFINED标签用于判断某个常量是否有定义,用法如下: 大理石平台检验标准 <defined name="NAME"> NAME常量已经定义 </defined ...
- USART 串口
串口不工作 请逐一检查: 是否正确配置复用IO口(先用RCC_APB2PeriphClockCmd在RCC寄存器中先开启GPIOx的时钟使能,再用 GPIO_Init 进行IO复用配置) 是否正确配置 ...
- 深入分析Service启动、绑定过程
Service是Android中一个重要的组件,它没有用户界面,可以运行在后太做一些耗时操作.Service可以被其他组件启动,甚至当用户切换到其他应用时,它仍然可以在后台保存运行.Service 是 ...
- 19.SimLogin_case06
# 使用自造的cookies登录GitHub import requests from lxml import etree str = '_octo=GH1.1.518803230.153726461 ...
- D3.js+Es6+webpack构建人物关系图(力导向图)
功能列表:1. 增加下载SVG转PNG功能,图片尺寸超出可视区域也能够下载全部显示出来2. 增加图谱放大缩小平移功能3. 增加图谱初始化加载时自动缩放功能4. 增加导出excel功能,配合后台工具类达 ...
- USACO training course Checker Challenge N皇后 /// oj10125
...就是N皇后 输出前三种可能排序 输出所有可能排序的方法数 vis[0][i]为i点是否已用 vis[1][m+i]为i点副对角线是否已用 m+i 为从左至右第 m+i 条副对角线 vis[1] ...