需要对源码ueditor.all.js文件进行修改。
参考文章：https://blog.csdn.net/m0_37826725/article/details/99094029
一、在ueditor.all.js文件的开头定义变量和方法
var imgCover = {};
var imgsCover = {}, posteres;
// 视频封面上传动作
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');
}二、添加上传视频的按钮：
搜索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 > ";最重要的是 搜索这个me.commands["insertvideo"] = { 下面for循环里面这一句替换一下
html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, "image", posteres));
三、添加按钮的点击事件
搜索 var popup = new baidu.editor.ui.Popup({ 在里面添加一个方法，
参考的文章中有：
urlcover.title = '视频封面';
这样的一个设置，我给去掉了，是因为如果我先上传了视频并且修改了封面后，再去想上传图片，上传不了了，因此再后面第六条我添加了关闭弹窗的时候注释掉视频封面上传的方法了。
_onImgCoverEditButtonClick: function (name) {
//this.hide();
imgsCover = editor.ui._dialogs[name];
editor.ready(function () {
editor.addListener("beforeInsertImage", _coverInsertImage);
});
var urlcover = editor.getDialog("insertimage");
urlcover.render();
urlcover.open();
},四、在创建插入视频字符串的function creatInsertStr(url,width,height,id,align,classname,type,poster){ 中添加poster参数
/**
* 创建插入视频字符窜
* @param url 视频地址
* @param width 视频宽度
* @param height 视频高度
* @param align 视频对齐
* @param toEmbed 是否以flash代替显示
* @param addParagraph 是否需要添加P 标签
*/
function creatInsertStr(url,width,height,id,align,classname,type,poster){
url = utils.unhtmlForUrl(url);
align = utils.unhtml(align);
classname = utils.unhtml(classname);
width = parseInt(width, 10) || 0;
height = parseInt(height, 10) || 0; 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 preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}" poster="'+poster+'" >' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;
}
return str;
}上面哪个方法下面的switchImgAndVideo方法 贴出全部代码
function switchImgAndVideo(root,img2video){
imgCover = root;
console.log('img2video',img2video)
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(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.addOutputRule(function(root){
switchImgAndVideo(root,true)
});
me.addInputRule(function(root){
switchImgAndVideo(root)
});五、修改了ueditor.config.js 里面的whiteList 中的video 添加了poster
video : [ 'autoplay', 'controls', 'loop', 'preload', 'src',
'height', 'width', 'class', 'style','poster' ],与参考文章不同的是，如果我先上传了视频封面后再去上传图片。此时上传的图片只是把封面修改了，上传图片的公共就不能使用了。
六、在上传视频封面的弹窗关闭时将_coverInsertImage注销掉。
位置：
在27374行
close: function (ok){
if (this.fireEvent('close', ok) !== false) {
//还原环境
if ( this.fullscreen ) {
document.documentElement.style.overflowX = this._originalContext.html.overflowX;
document.documentElement.style.overflowY = this._originalContext.html.overflowY;
document.body.style.overflowX = this._originalContext.body.overflowX;
document.body.style.overflowY = this._originalContext.body.overflowY;
delete this._originalContext;
}
this._hide();
//视频封面上传的注销事件
editor.removeListener("beforeInsertImage", _coverInsertImage);
//销毁content
var content = this.getDom('content');
var iframe = this.getDom('iframe');
if (content && iframe) {
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc && (doc.body.innerHTML = '');
domUtils.remove(content);
}
}
}七、对 me.filterInputRule(root) 进行注释
结束了～～～