版本：ueditor1_4_3_3-utf8-php
页面引入文件：ueditor/ueditor.config.js
ueditor/ueditor.all.js
问题1： 上传视频时，输入有效视频网址，显示“输入的视频地址有误，请检查后再试！”的问题！
修改 ueditor/dialogs/video/video.js文件
将文档内大概在 275 行 的代码：
$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>';
修改为：
$.ajax({
url : conUrl,
type : 'HEAD',
error : function() {
$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>' +
'<embed' +
' src="' + conUrl + '"' +
' width="' + 420 + '"' +
' height="' + 280 + '"' +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
'</embed>';
},
success : function() {
$G("preview").innerHTML =
'<embed' +
' src="' + conUrl + '"' +
' width="' + 420 + '"' +
' height="' + 280 + '"' +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
'</embed>';
}
});
修改后文件 (ueditor/dialogs/video/video.js)
/** * 根据url生成视频预览 * @param 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>'; $.ajax({ url : conUrl, type : 'HEAD', error : function() { $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>' + '<embed' + ' src="' + conUrl + '"' + ' width="' + 420 + '"' + ' height="' + 280 + '"' + ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' + '</embed>'; }, success : function() { $G("preview").innerHTML = '<embed' + ' src="' + conUrl + '"' + ' width="' + 420 + '"' + ' height="' + 280 + '"' + ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' + '</embed>'; } }); }
截图
问题2： 编辑器内无法预览上传的视频问题
转自：https://blog.csdn.net/belen_xue/article/details/73252802
先来看具体的bug情况：
在插入视频里放入地址后，正常显示在插入视频里，这个时候是正常的
但插入后会显示下图，视频没有正常的预览，这是因为设置插入编辑器里的不是视频的代码，而是image图片的代码
这个时候如果进入源码看的话，会发现里面是空的，根本什么都没有
在进入编辑器的预览会发现之前的图片都消失了
出现这种情况是由于编辑器没有开放视频插入的代码的白名单，所以会被过xss滤掉
解决方案：
首先在ueditor.config.js文件里增加xss过滤白名单：
在这里的末尾加上下列在插入视频中使用的代码：
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']
修改后文件 (ueditor.config.js)
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js ,whitList: { a: ['target', 'href', 'title', 'class', 'style'], abbr: ['title', 'class', 'style'], address: ['class', 'style'], area: ['shape', 'coords', 'href', 'alt'], article: [], aside: [], audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'], b: ['class', 'style'], bdi: ['dir'], bdo: ['dir'], big: [], blockquote: ['cite', 'class', 'style'], br: [], caption: ['class', 'style'], center: [], cite: [], code: ['class', 'style'], col: ['align', 'valign', 'span', 'width', 'class', 'style'], colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'], dd: ['class', 'style'], del: ['datetime'], details: ['open'], div: ['class', 'style'], dl: ['class', 'style'], dt: ['class', 'style'], em: ['class', 'style'], font: ['color', 'size', 'face'], footer: [], h1: ['class', 'style'], h2: ['class', 'style'], h3: ['class', 'style'], h4: ['class', 'style'], h5: ['class', 'style'], h6: ['class', 'style'], header: [], hr: [], i: ['class', 'style'], img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'], ins: ['datetime'], li: ['class', 'style'], mark: [], nav: [], ol: ['class', 'style'], p: ['class', 'style'], pre: ['class', 'style'], s: [], section:[], small: [], span: ['class', 'style'], sub: ['class', 'style'], sup: ['class', 'style'], strong: ['class', 'style'], table: ['width', 'border', 'align', 'valign', 'class', 'style'], tbody: ['align', 'valign', 'class', 'style'], td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'], tfoot: ['align', 'valign', 'class', 'style'], th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'], thead: ['align', 'valign', 'class', 'style'], tr: ['rowspan', 'align', 'valign', 'class', 'style'], tt: [], u: [], ul: ['class', 'style'], video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'], 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']
截图
另外由于插入的代码不是视频，那么首先要找到插入编辑器代码的代码，位置在ueditor.all.js里，如果引用的是uedior.min.js就需要在这里找，找到以下代码:
修改文件(ueditor.all.js)
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')); html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'embed')); } me.execCommand("inserthtml",html.join(""),true); var rng = this.selection.getRange(); // for(var i= 0,len=videoObjs.length;i<len;i++){ // var img = this.document.getElementById('tmpVedio'+i); // domUtils.removeAttributes(img,'id'); // rng.selectNode(img).select(); // me.execCommand('imagefloat',videoObjs[i].align) // } }, queryCommandState : function(){ var img = me.selection.getRange().getClosedNode(), flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1); return flag ? 1 : 0; } };
截图
改完这里后会发现插入视频地址后，虽然编辑器可以看到视频了，但是插入视频的窗口不能关闭了
之所以会出现这个问题是因为改动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"' +'
修改文件(ueditor.all.js)
switch (type){ case 'image': str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"' + ' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />' break; // case 'embed': // str = '<embed type="application/x-shockwave-flash" 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 'embed': str = '<embed 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); 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 + '" src="' + url + '" data-setup="{}">' + '<source src="' + url + '" type="video/' + ext + '" /></video>'; break; }
截图
插入视频
上传视频后
更改好后，刷新一下，我们再来看看插入视频后进入源码然后再回到编辑器预览状态下已经没有问题了，可以正常预览，红框里的代码的src内容已经不会被过滤了：
另外上传视频也可以正常运作，如果是按照网上改edui-faked那种，这里如果传的是MP4等其他格式的就会出问题。