版權聲明：遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
原文出處鏈接：https://blog.csdn.net/m0_37826725/article/details/99094029

原文處作者留了一個不明顯的巨坑，所以再此處修改一下。原文處的"onclick" 不要復制

思路就是：選中上傳的視頻-點擊上傳封面-調用ueditor內部的圖片上傳-更改保存的html內容-更改顯示的背景圖

首先說明是要更改源碼的！！！！

我是在ueditor.config.js里面沒有xss過濾白名單的情況下完成下面的操作的。這個東西可以不要，可以直接把whitList這個節點注釋掉。

全是在ueditor.all.js里面改的源碼

第一步：增加添加封面的按鈕

搜索popup.formatHtml(str)代碼把str賦值的內容替換成下面內容

var coverButton = ""; if (dialogName == "insertvideoDialog") {coverButton = "&nbsp;&nbsp;" +'<span onclick=$$._onImgCoverEditButtonClick(\'' +dialogName +'\') class="edui-clickable"><input id="coverImgUrl" style="display:none;" type="file" />添加封面' +"</span>"; } str = '<nobr>' + editor.getLang("property") + ': '+'<span onclick=$$._onImgSetFloat("none") class="edui-clickable">' + editor.getLang("default") + '</span>&nbsp;&nbsp;' +'<span onclick=$$._onImgSetFloat("left") class="edui-clickable">' + editor.getLang("justifyleft") + '</span>&nbsp;&nbsp;' +'<span onclick=$$._onImgSetFloat("right") class="edui-clickable">' + editor.getLang("justifyright") + '</span>&nbsp;&nbsp;' +'<span onclick=$$._onImgSetFloat("center") class="edui-clickable">' + editor.getLang("justifycenter") + '</span>&nbsp;&nbsp;'+'<span onclick="$$._onImgEditButtonClick(\'' + dialogName + '\');" class="edui-clickable">' + editor.getLang("modify") + '</span>'+coverButton + '</nobr>';

這樣寫是因為只是視頻會顯示添加封面的按鈕。

第二步，添加按鈕的點擊事件，搜索var popup = new baidu.editor.ui.Popup({

在下面方法中增加一個方法_onImgCoverEditButtonClick，就是上面增加添加封面按鈕的點擊事件的方法。

我會把baidu.editor.ui.Popup這個里面的內容全部貼出來可以全部替換。

var popup = new baidu.editor.ui.Popup({editor: editor,content: "",className: "edui-bubble",_onEditButtonClick: function() {this.hide();editor.ui._dialogs.linkDialog.open();},_onImgEditButtonClick: function(name) {this.hide();editor.ui._dialogs[name] && editor.ui._dialogs[name].open();},_onImgCoverEditButtonClick: function (name) {//this.hide();imgsCover = editor.ui._dialogs[name];editor.ready(function () {editor.addListener("beforeInsertImage", _coverInsertImage);});var urlcover = editor.getDialog("insertimage");urlcover.title = '視頻封面';urlcover.render();urlcover.open();},_onImgSetFloat: function(value) {this.hide();editor.execCommand("imagefloat", value);},_setIframeAlign: function(value) {var frame = popup.anchorEl;var newFrame = frame.cloneNode(true);switch (value) {case -2:newFrame.setAttribute("align", "");break;case -1:newFrame.setAttribute("align", "left");break;case 1:newFrame.setAttribute("align", "right");break;}frame.parentNode.insertBefore(newFrame, frame);domUtils.remove(frame);popup.anchorEl = newFrame;popup.showAnchor(popup.anchorEl);},_updateIframe: function() {var frame = editor._iframe = popup.anchorEl;if (domUtils.hasClass(frame, "ueditor_baidumap")) {editor.selection.getRange().selectNode(frame).select();editor.ui._dialogs.mapDialog.open();popup.hide();} else {editor.ui._dialogs.insertframeDialog.open();popup.hide();}},_onRemoveButtonClick: function(cmdName) {editor.execCommand(cmdName);this.hide();},queryAutoHide: function(el) {if (el && el.ownerDocument == editor.document) {if (el.tagName.toLowerCase() == "img" || domUtils.findParentByTagName(el, "a", true)) {return el !== popup.anchorEl;}}return baidu.editor.ui.Popup.prototype.queryAutoHide.call(this, el);}});

在文件開頭(function() {下面聲明變量存放數據用

var imgCover = {}; var imgsCover = {}, posteres;

在if (editor.options.imagePopup)這個if語句下面增加一個處理上傳視頻封面的方法

// 視頻封面上傳動作 function _coverInsertImage(t, result) {var imageHtml = '';for (var i in result) {posteres = imageHtml = result[i].src;}var img = imgsCover.editor.selection.getRange().getClosedNode(), url;url = img.getAttribute("_url");var align;utils.each(imgCover.getNodesByTagName("embed video"),function (node) {align = node.getStyle("float") || "";});editor.execCommand('insertvideo', {url: url + "+" + imageHtml,width: img.width,height: img.height,align: align}, 'upload'); }

修改creatInsertStr 我貼出這個方法的代碼

/*** 創建插入視頻字符竄* @param url 視頻地址* @param width 視頻寬度* @param height 視頻高度* @param align 視頻對齊* @param toEmbed 是否以flash代替顯示* @param addParagraph 是否需要添加P 標簽*/ function creatInsertStr(url, width, height, id, align, classname, type, poster) {var str;switch (type) {case "image":str = "<img " +(id ? 'id="' + id + '"' : "") +' width="' +width +'" height="' +height +'" _url="' +url +'" class="' +classname.replace(/\bvideo-js\b/, "") +'"' +' src="' +poster +'" style="background:url(' +poster +") no-repeat center center; border:1px solid gray;" +(align ? "float:" + align + ";" : "") +'" />';break;case "embed":str = '<embed type="application/x-shockwave-flash" 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);if (ext == "ogv") ext = "ogg";str = "<video" +(id ? ' id="' + id + '"' : "") +' class="' +classname +' video-js" ' +(align ? ' style="float:' + align + '"' : "") +' controls poster="' +poster +'" preload="none" width="' +width +'" height="' +height +'" src="' +url +'" data-setup="{}">' +'<source src="' +url +'" type="video/' +ext +'" /></video>';break;}return str; }

修改switchImgAndVideo 我貼出這個方法的代碼

function switchImgAndVideo(root, img2video) {imgCover = root;utils.each(root.getNodesByTagName(img2video ? "img" : "embed video"),function (node) {var className = node.getAttr("class");var _urles = node.getAttr("_url");posteres = node.attrs.poster;if (typeof (node.getAttr("_url")) != "undefined") {if (node.getAttr("_url").indexOf("+") != -1) {var _urlsposters = node.getAttr("_url").split("+");_urles = _urlsposters[0];posteres = _urlsposters[1];}}if (img2video) {posteres = node.getAttr("src");}if (className && className.indexOf("edui-faked-video") != -1) {var html = creatInsertStr(img2video ? node.getAttr("_url") : node.getAttr("src"),node.getAttr("width"),node.getAttr("height"),null,node.getStyle("float") || "",className,img2video ? "embed" : "image");node.parentNode.replaceChild(UE.uNode.createElement(html), node);}if (className && className.indexOf("edui-upload-video") != -1) {var html = creatInsertStr(img2video ? _urles : node.getAttr("src"),node.getAttr("width"),node.getAttr("height"),null,node.getStyle("float") || "",className,img2video ? "video" : "image", posteres);node.parentNode.replaceChild(UE.uNode.createElement(html), node);}}); }

最后在搜索這個me.commands[“insertvideo”] = {下面for循環里面這一句替換一下

html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, "image", posteres));

總結

以上是生活随笔為你收集整理的解决百度富文本编辑器Ueditor自定义上传视频封面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。