！！！每次改动后记得，清除一下浏览器缓存再试 ！！！
4点：
1.修复编辑时视频不能预览问题；
2.插入视频的时候。在预览的窗口提示 “输入的视频地址有误，请检查后再试！”
3.ueditor 解决上传视频回显 src链接丢失问题
4.ueditor 自定义插入视频封面（页面加载时显示）
1. 修复编辑时视频不能预览问题
在 ueditor.all.js 中 ，搜索 me.fireEvent('beforesetcontent', html);
将下列注释
- //修复编辑是视频不能预览问题
- // me.fireEvent('beforesetcontent', html);
- // var root = UE.htmlparser(html);
- // me.filterInputRule(root);
- // html = root.toHtml();
搜索 me.commands["insertvideo"]
把
- 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'));
2. 插入视频的时候。在预览的窗口提示 “输入的视频地址有误，请检查后再试！”如：
解决方法：
1.在ueditor.all.js中 搜索 me.commands["insertvideo"]
//此处将 edui-faked-video 改为 edui-faked，防止后面将此处替换为image标签
// 此处将image改为embed/video ，实现 1.实时预览视频， 2.修复了第一次插入视频保存后，刷新后再保存会导致视频丢失的bug
- me.commands["insertvideo"] = {
- execCommand: function (cmd, videoObjs, type){
- videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
- var html = [],id = 'tmpVedio', cl;
- for(var i=0,vi,len = videoObjs.length;i<len;i++){
- vi = videoObjs[i];
- //cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
- //html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
-
- //此处将 edui-faked-video 改为 edui-faked，防止后面将此处替换为image标签
- cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
- // 此处将image改为embed/video , 实现实时预览视频，且修复了第一次插入视频保存后，刷新后再保存会导致视频丢失的bug
- html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));
- }
- me.execCommand("inserthtml",html.join(""),true);
- var rng = this.selection.getRange();
- ...
2.在ueditor.config.js中 搜索 whitList
img 字段中 添加"_url"
- img:['src', 'alt', 'title', 'width', 'height', 'id', '_src','_url', 'loadingclass', 'class', 'data-latex', 'style', 'url'],//加了style和url
video 后面添加如下规则字段（video不要忘记加逗号）
- 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){ 把下面的内容替换
- function createPreviewVideo(url){
- if ( !url )return;
- var conUrl = convert_url(url);
- conUrl = utils.unhtmlForUrl(conUrl);
- $G("preview").innerHTML =
- // '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
- // '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
- // ' src="' + conUrl + '"' +
- // ' width="' + 420 + '"' +
- // ' height="' + 280 + '"' +
- // ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
- // '</embed>';
-
- //换成video标签
- '<video' +
- ' src="' + conUrl + '"' +
- ' width="' + 420 + '"' +
- ' height="' + 280 + '"' +
- ' autoplay' +
- ' controls="controls">'+
- '</video>';
- }
3. ueditor 解决上传视频回显 src链接丢失问题
切换 html 按钮src链接丢失问题
在ueditor.config.js文件的 361行左右 ,
inputXssFilter:true 修改为 ,inputXssFilter:false
- // xss 过滤是否开启,inserthtml等操作
- ,xssFilterRules: true
- //input xss过滤
- //,inputXssFilter: true
- ,inputXssFilter: false //解决视频回显src消失
- //output xss过滤
- ,outputXssFilter: true
- // xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
- ,whitList: {
...
在 ueditor.all.js 中 搜索 编辑器默认的过滤转换机制 or UE.plugins['defaultfilter']
加上return
- // plugins/defaultfilter.js
- ///import core
- ///plugin 编辑器默认的过滤转换机制
- UE.plugins['defaultfilter'] = function () {
- return;
- var me = this;
- me.setOpt({
- ...
找到 case 'img': ，注释代码
- case 'img':
- //todo base64暂时去掉，后边做远程图片上传后，干掉这个
- // if (val = node.getAttr('src')) {
- // if (/^data:/.test(val)) {
- // node.parentNode.removeChild(node);
- // break;
- // }
- // }
- // node.setAttr('_src', node.getAttr('src'));
- break;
- ...
4. ueditor 自定义插入视频封面（页面加载时显示）
预先保存一张封面到服务器 假设路径为 /static/images/video-poster.png
在 ueditor.config.js 中 搜索 whitList 在 video 中字段 添加 poster
- video: ['autoplay', '_src', 'poster', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style', 'id'],
修改ueditor.all.js中 搜索 case 'video': 添加 poster 字段 （通过js获取当前域名，拼接上保存到服务器上的图片作为url）
- case 'embed':
- //str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
- str = '<embed class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
- ' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
- ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
- break;
- case 'video':
- var ext = url.substr(url.lastIndexOf('.') + 1);
- //当前域名window.location.protocol+"//"+window.location.host
- var locationHost = window.location.protocol+"//"+window.location.host;
- if(ext == 'ogv') ext = 'ogg';
- str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
- ' controls preload="none" width="' + width + '" height="' + height +
- '" poster="'+locationHost+'/static/images/video-poster.png" src="' + url + '" data-setup="{}">' +
- '<source src="' + url + '" type="video/' + ext + '" /></video>';
- break;
经验首页