zoukankan      html  css  js  c++  java
  • 修复 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>';
        }
    
  • 相关阅读:
    浦东新区2019年下半年部分街镇社区工作者和部分单位编外人员公开招聘考试大纲
    苏州 山西
    第几行记录
    命令 检查Linux服务器性能
    SQLRecoverableException: I/O Exception: Connection reset
    Oracle单表备份三种方案
    vim 清空
    常看 Shell: 文本文件操作
    bash date format
    Linux Shell 截取字符串
  • 原文地址:https://www.cnblogs.com/Run2948/p/UEditor_Fixed_In_AspNetCore.html
Copyright © 2011-2022 走看看