修复 UEditor 上传视频的相关问题

相关问题:

1.上传后无法播放的问题

2.编辑后视频丢失的问题

3.切换 html 按钮src链接丢失问题

4.插入视频后预览出错的问题

解决方案:

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

  1. edui-faked-video 改为 edui-faked, 防止此处被替换为 image 标签
  2. image 改为 video, 实现视频实时预览,修复保存导致视频丢失
    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'));
                //TODO: 将 edui-faked-video 改为 edui-faked,防止此处被替换为image标签;
                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
                //TODO: 将 image 改为 video, 实现视频实时预览,修复保存导致视频丢失;
                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();
            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)
            }
        },

2.打开 ueditor.config.js 文件,搜索 whitList

  1. 添加 _url,style,url 字段
  2. 添加 source, embed, iframe 规则
,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'],
            // TODO: 添加 _url,style,url 字段
			img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src','_url', 'loadingclass', 'class', 'data-latex','style', 'url'],
			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'],
            // TODO: 添加 source, embed, iframe 规则
            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文件,搜索 createPreviewVideo

  1. embed 换成 video 标签
    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>';
        
        // TODO: 将 embed 换成 video 标签
         $G("preview").innerHTML =  '<video' +
            ' src="' + conUrl + '"' +
            ' width="' + 420 + '"' +
            ' height="' + 280 + '"' +
            ' autoplay' +
            ' controls="controls">'+
            '</video>';
    }
posted @ 2020-12-30 18:41  Run2948  阅读(382)  评论(0编辑  收藏  举报