！！！每次改動后記得，清除一下瀏覽器快取再試 ！！！
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 ><span>'+lang.urlError+'</span></div>'+ // '<embed 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" pluginspage="http://www.macromedia.com/go/getflashplayer"' + str = '<embed 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 + '"' : '') + ' ' + (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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/174080.html
標籤：JavaScript
上一篇：ES6 箭頭函式
下一篇：awit的用法，等待執行結果