【亲测有效】项目使用百度Ueditor富文本编辑器上传视频相关操作问题
1.百度Ueditor富文本编辑器添加插入视频、视频不显示
2.百度Ueditor富文本编辑器插入视频后二次编辑视频标签不显示，在编辑器内显示成img标签，二次保存视频被替换问题
问题1：添加插入视频、视频不显示。效果图
解决方案
1.打开ueditor目录下ueditor.all.js文件
2.搜索me.commands["insertvideo"]
3.将17770行代码中的image修改成video
修改前代码
me.commands["insertvideo"] = {execCommand: function (cmd, videoObjs, type){videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];var html = [],id = 'tmpVedio', cl;for(var i=0,vi,len = videoObjs.length;i<len;i++){vi = videoObjs[i];cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));}me.execCommand("inserthtml",html.join(""),true);var rng = this.selection.getRange();for(var i= 0,len=videoObjs.length;i<len;i++){var img = this.document.getElementById('tmpVedio'+i);domUtils.removeAttributes(img,'id');rng.selectNode(img).select();me.execCommand('imagefloat',videoObjs[i].align)}},queryCommandState : function(){var img = me.selection.getRange().getClosedNode(),flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);return flag ? 1 : 0;}};
修改后代码
me.commands["insertvideo"] = {execCommand: function (cmd, videoObjs, type){videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];var html = [],id = 'tmpVedio', cl;for(var i=0,vi,len = videoObjs.length;i<len;i++){vi = videoObjs[i];cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));}me.execCommand("inserthtml",html.join(""),true);var rng = this.selection.getRange();for(var i= 0,len=videoObjs.length;i<len;i++){var img = this.document.getElementById('tmpVedio'+i);domUtils.removeAttributes(img,'id');rng.selectNode(img).select();me.execCommand('imagefloat',videoObjs[i].align)}},queryCommandState : function(){var img = me.selection.getRange().getClosedNode(),flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);return flag ? 1 : 0;}};
解决后上传视频在百度Ueditor富文本编辑器内展示效果图
PS：要是修改后没有效果请清理浏览器缓存
问题2：插入视频后二次编辑视频标签不显示，在编辑器内显示成img标签，二次保存视频被替换问题。效果图
解决方案
1.打开ueditor目录下ueditor.all.js文件
2.搜索function switchImgAndVideo(root,img2video){
3.将17684行代码中的image修改成video
修改前代码
function switchImgAndVideo(root,img2video){utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){var className = node.getAttr('class');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 ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}})}
修改后代码
function switchImgAndVideo(root,img2video){utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){var className = node.getAttr('class');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 ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'video');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}})}
解决后二次编辑视频标签在百度Ueditor富文本编辑器内展示效果图
