修改百度编辑器ueditor源码，添加上传视频封面内容

您所在的位置：网站首页 › ueditor自定义按钮 › 修改百度编辑器ueditor源码，添加上传视频封面内容

修改百度编辑器ueditor源码，添加上传视频封面内容

2024-01-14 21:16| 来源: 网络整理| 查看: 265

需要对源码ueditor.all.js文件进行修改。

参考文章：https://blog.csdn.net/m0_37826725/article/details/99094029

一、在ueditor.all.js文件的开头定义变量和方法

二、添加上传视频的按钮：

搜索popup.formatHtml(str)代码把str赋值的内容替换成下面内容

var coverButton = ""; if (dialogName == "insertvideoDialog") { coverButton = ";;" + '添加封面' + ""; } str = "" + editor.getLang("property") + ": " + '' + editor.getLang("default") + ";;" + '' + editor.getLang("justifyleft") + ";;" + '' + editor.getLang("justifyright") + ";;" + '' + editor.getLang("justifycenter") + ";;" + '' + editor.getLang("modify") + "" + coverButton + " ";

最重要的是搜索这个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 = '

' break; case 'embed': str = ''; break; case 'video': var ext = url.substr(url.lastIndexOf('.') + 1); if(ext == 'ogv') ext = 'ogg'; str = '' + ''; 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) 进行注释

结束了～～～

【本文地址】

修改百度编辑器ueditor源码，添加上传视频封面内容

修改百度编辑器ueditor源码，添加上传视频封面内容

今日新闻

推荐新闻