百度ueditor富文本插件插入视频问题汇总【必须收藏】

业务场景:想必在非vue情况下很多后台大多都在用百度的富文本,这不公司的一些老项目在迁移另一台服务器后就遇到了各式各样的奇怪问题,此文会总结汇总该插件的所有相关问题及修改方案,不断更新!

问题一:在插入网络视频提示 “输入的视频地址有误,请检查后再试! “解决方法

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第1张图片

 1、打开文件: ueditor.all.js;搜索 me.commands["insertvideo"]

html html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));

改为插入的 embed 标签

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'embed'));

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第2张图片

 2、打开文件:ueditor.config.js;搜索:whitList;img里面添加"_url"

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第3张图片

 最后增加:

source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

3、打开文件: dialogs/video/video.js;搜索 function createPreviewVideo(url)

把下面的内容替换

 $G("preview").innerHTML = '';

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第4张图片

 

问题二:ueditor 在上传视频之后,编辑页面,显示空白。查看html有视频,就是显示空白

打开文件: ueditor.all.js,搜索 setContent: function (html, isAppendTo, notFireSelectionchange)

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第5张图片

 

问题三:上传之后,无法关闭弹窗是因为改动embed后,下面红框的代码无法正常找到image标签及其里面的属性导致的

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第6张图片

打开文件:ueditor.all.js;搜索me.commands["insertvideo"], 注释掉红框部分;

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第7张图片 

 

问题四:视频无法显示问题

 打开文件:ueditor.all.js;搜索case 'embed'

 

str = '';
                break;

改为

str = '';
                break;

 其实,就是去掉了:

type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +'   

 

问题五:如何设置一个封面(针对的是video标签)

这种方式就是给所有的视频都添加一个默认封面图,图片就是ueditor.all.js中的添加的那个。

修改ueditor.config.js中的xss过滤白名单,修改内容如下:添加poster属性

 百度ueditor富文本插件插入视频问题汇总【必须收藏】_第8张图片

 然后修改ueditor.all.js中的内容,修改内容如下

 百度ueditor富文本插件插入视频问题汇总【必须收藏】_第9张图片

 

另一种方式是使用视频中的内容作为封面,没办法选帧数。

在ueditor.all.js中添加 preload=“meta”属性值位置如下图所示。

百度ueditor富文本插件插入视频问题汇总【必须收藏】_第10张图片

 

以上两种方式都可以解决没有上传视频封面的问题 

 

问题六:embed标签如何设置视频自动播放,这个去查看embed标签的属性就知道了,修改属性值play="true"就可以自动播放了

 百度ueditor富文本插件插入视频问题汇总【必须收藏】_第11张图片

 百度ueditor富文本插件插入视频问题汇总【必须收藏】_第12张图片

 

 直接在源代码模式里改就完了。(注意xss过滤需支持该标签,否则保存不上会被过滤掉。)

以下会持续更新,坑我来了~!

你可能感兴趣的:(大数据,javascript,web,编辑器,前端)