欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-26 13:18:55
...

版权声明:遵循 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));