版权声明：遵循 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> ' +
'<span onclick=$$._onImgSetFloat("left") class="edui-clickable">' + editor.getLang("justifyleft") + '</span> ' +
'<span onclick=$$._onImgSetFloat("right") class="edui-clickable">' + editor.getLang("justifyright") + '</span> ' +
'<span onclick=$$._onImgSetFloat("center") class="edui-clickable">' + editor.getLang("justifycenter") + '</span> '+
'<span onclick="$$._onImgEditButtonClick(\'' + dialogName + '\');" class="edui-clickable">' + editor.getLang("modify") + '</span>'+
coverButton + '</nobr>';123456789101112131415
这样写是因为只是视频会显示添加封面的按钮。
第二步，添加按钮的点击事件，搜索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);
}
});12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
在文件开头(function() {下面声明变量存放数据用
var imgCover = {};
var imgsCover = {}, posteres;123
在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');
}12345678910111213141516171819202122
修改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;
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
修改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);
}
});
}123456789101112131415161718192021222324252627282930313233343536373839
最后在搜索这个me.commands[“insertvideo”] = {下面for循环里面这一句替换一下
html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, "image", posteres));
延伸阅读
- 如何实现用户id生成一个唯一邀请码
- windows 搭建swoole搭建环境
