修復 UEditor 上傳視訊的相關問題
阿新 • • 發佈:2020-12-30
相關問題:
1.上傳後無法播放的問題
2.編輯後視訊丟失的問題
3.切換 html
按鈕src
連結丟失問題
4.插入
視訊後預覽出錯的問題
解決方案:
1. 開啟 ueditor.all.js
檔案,搜尋 me.commands["insertvideo"]
- 將
edui-faked-video
改為edui-faked
, 防止此處被替換為 image 標籤 - 將
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
- 新增
_url
,style
,url
欄位 - 新增
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
- 將
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>'; }