Ueditor 关于视频上传相关问题

 

  ！！！每次改动后记得，清除一下浏览器缓存再试 ！！！  

 

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;