【亲测有效】项目使用百度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富文本编辑器内展示效果图
