百度编辑器(ueditor)上传视频二次调用丢失链接的解决方法

标签: 编辑器  ueditor

之前有接触ueditor,后测试上传视频处有bug???发现视频第一次存到数据库是有链接的但是呢拿出来再编辑的时候发现链接丢了

看到的是这样的


开始想办法改啦,网上搜搜发现挺多人遇到这问题的,经过各种改这改那的试验,发现其实只要改白名单就可以了......

原理是这个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文件夹,里面可以自定义保存路径之类的,打开看就知道啦。

恩,应该没啥要补充的了,仅供参考哦~欢迎批评指正!

版权声明:本文为weixin_38023507原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38023507/article/details/74055115