解决百度富文本编辑器Ueditor自定义上传视频封面

版权声明：遵循 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 = "  " +
    '<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));