百度编辑器(ueditor)上传视频二次调用丢失链接的解决方法
2017-07-01 12:21
513 查看
之前有接触ueditor,后测试上传视频处有bug???发现视频第一次存到数据库是有链接的但是呢拿出来再编辑的时候发现链接丢了
![](https://img-blog.csdn.net/20170701122457459?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
看到的是这样的
![](https://img-blog.csdn.net/20170701123017609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
开始想办法改啦,网上搜搜发现挺多人遇到这问题的,经过各种改这改那的试验,发现其实只要改白名单就可以了......
原理是这个ueditor.config.js里面有一个白名单机制,白名单会过滤掉各种标签或它的各种属性,于是我们打开udeitor.config.js搜索whitlist(大概在365行)设置白名单。
修改它的img和video的属性,可以复制粘贴下面代码替换,分别替换哦,
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style','_url'],//加了style和_url
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style','id'],//加了id
哈哈哈哈,是不是超级简单,关于ueditor的很多问题好像都是要改白名单的,仅供参考哈
方法应该是多种多样的,大家自己研究~另外告诉大家上传音乐貌似是有大bug的,暂未解决,直接把它从自定义菜单栏删了,小伙伴单独拿出来做了上传音乐。
提到自定义菜单顺表也贴一个小小的解决办法,在实例化自己的ueditor的时候就可以自定义了,还是这个ueditor.config.js文件,大概在36行有一个toolbars(也可以ctrl+f直接搜索,不过这个代码也不是很多),在里面可以自己定义,要的留下不要的删掉,或者在实例化的时候自定义,如
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="../utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map','pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'preview', 'searchreplace', 'help'
]]
});
</script>这个可以参考他们的Ueditor文档
另外补充一下那个上传视频尺寸的修改,默认是420*280,,有需要的话可以参考一下,总结三步:
1、在ueditor.all.js的大约17769行有看到...vi.width||420,vi.height||280.....的一串代码,改成自己的宽高就可以
2、在video.js里面有三处,直接查找420替换成你想要的宽,查找280替换成你想要的高就可以
3、还有ueditor.all.min.js里面,跟2一样,直接查找替换,不然眼睛要瞎的,相信我。查找替换真的很好用。
完成这三步之后再去插入视频会发现尺寸已经改好啦哈哈哈哈
对了大家在改完之后如果不生效的话建议清清浏览器的缓存试试。
啊~顺便再提一下php文件夹下面有一个config.json文件夹,里面可以自定义保存路径之类的,打开看就知道啦。
恩,应该没啥要补充的了,仅供参考哦~欢迎批评指正!
看到的是这样的
开始想办法改啦,网上搜搜发现挺多人遇到这问题的,经过各种改这改那的试验,发现其实只要改白名单就可以了......
原理是这个ueditor.config.js里面有一个白名单机制,白名单会过滤掉各种标签或它的各种属性,于是我们打开udeitor.config.js搜索whitlist(大概在365行)设置白名单。
修改它的img和video的属性,可以复制粘贴下面代码替换,分别替换哦,
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style','_url'],//加了style和_url
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style','id'],//加了id
哈哈哈哈,是不是超级简单,关于ueditor的很多问题好像都是要改白名单的,仅供参考哈
方法应该是多种多样的,大家自己研究~另外告诉大家上传音乐貌似是有大bug的,暂未解决,直接把它从自定义菜单栏删了,小伙伴单独拿出来做了上传音乐。
提到自定义菜单顺表也贴一个小小的解决办法,在实例化自己的ueditor的时候就可以自定义了,还是这个ueditor.config.js文件,大概在36行有一个toolbars(也可以ctrl+f直接搜索,不过这个代码也不是很多),在里面可以自己定义,要的留下不要的删掉,或者在实例化的时候自定义,如
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="../utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map','pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'preview', 'searchreplace', 'help'
]]
});
</script>这个可以参考他们的Ueditor文档
另外补充一下那个上传视频尺寸的修改,默认是420*280,,有需要的话可以参考一下,总结三步:
1、在ueditor.all.js的大约17769行有看到...vi.width||420,vi.height||280.....的一串代码,改成自己的宽高就可以
2、在video.js里面有三处,直接查找420替换成你想要的宽,查找280替换成你想要的高就可以
3、还有ueditor.all.min.js里面,跟2一样,直接查找替换,不然眼睛要瞎的,相信我。查找替换真的很好用。
完成这三步之后再去插入视频会发现尺寸已经改好啦哈哈哈哈
对了大家在改完之后如果不生效的话建议清清浏览器的缓存试试。
啊~顺便再提一下php文件夹下面有一个config.json文件夹,里面可以自定义保存路径之类的,打开看就知道啦。
恩,应该没啥要补充的了,仅供参考哦~欢迎批评指正!
相关文章推荐
- 关于Struts2+spring中使用百度UEditor编辑器显示未找到上传数据的解决方法
- 百度UEditor调用单图片上传功能的解决方法
- 百度Ueditor编辑器的Html模式自动替换样式的解决方法
- 百度编辑器不能上传图片的问题解决方法
- 四.百度UEditor编辑器之视频上传处理类
- asp.net应用百度编辑器(UEditor)上传图片和上传附件不成功的解决办法
- 百度UEDITOR 内网上传视频支持IE8的方法
- 百度编辑器上传视频以及视频编辑器预览bug解决
- django应用百度ueditor图片上传 解决方法
- 百度编辑器(UEditor)调用上传图片、上传文件等模块,并修改图片、文件的保存路径
- ueditor 解决视频回显 src链接丢失问题
- 调用UEditor的图片上传组件进行图片上传,并解决多编辑器共存的取值问题
- ueditor编辑器asp版不能上传图片的解决方法(800a0046)
- ueditor上传大容量视频报http请求错误的解决方法
- 织梦使用百度Ueditor编辑器上传图片自动生成绝对路径实现方法(测试可用)
- 关于百度富文本编辑器ueditor的.NET版本地图片上传提示uploader类同时存在于两个dll中的解决方法
- Ueditor百度编辑器的Html模式自动替换样式的解决方法
- ueditor编辑器asp版不能上传图片的解决方法 500错误
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频
- asp.net应用百度编辑器(UEditor)上传图片跟上次附件不成功的解决办法