UEditor虽然强大，但是bug还是蛮多的。比如插入视频元素后，拖拽视频去缩放尺寸，编辑器并没有将实际的尺寸保存下来。当你点击HTML按钮查看源代码时，width和height还是原来的值，再次点击此按钮回到正常状态，缩略图又回到原来的大小了。
翻源代码翻了蛮久，终于把这个问题解决了。问题就出在插入视频后创建视频HTML字符串和HTML字符串与可视化编辑层转化的地方。
当视频上传完成后，创建一个img用于可视化编辑，将默认width和height设置到img的width和height的属性中。当你拖动可视化图片时，就会改变这个img的style中的width和height来改变img的大小（注意，不是改变width和height属性），将新的高和宽设置到。一直到这里其实都没什么问题。
看一下下面这段代码，在ueditor.all.js里：
function creatInsertStr(url,width,height,id,align,classname,type){
var str;
switch (type){
case 'image':
str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname + '"' +
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) 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 + '" ' + (align ? ' style="float:' + align + '"': '') +
'" controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;
}
return str;
}
function switchImgAndVideo(root,img2video){
utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){
var className = node.getAttr('class');
var rWidth = node.getStyle("width");
var rHeight = node.getStyle("height");
if(className && className.indexOf('edui-faked-video') != -1){
//here
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){
//here
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);
}
})
}
这段代码是用于控制html源码与可视化编辑直接的转换的,注释here下一行就是调用上面的方法，问题就出在这里。
这里传入creatInsertStr函数的width和height值是node.getAttr("width|height")，也就是说获取的是标签的width和height属性，而不是style属性里面的width和height。但实际上我们拖动的时候是改变img的style属性，img的width和height不会变，还是默认的值。所以你无论怎么拖动，到最后创建的html代码中video的宽和高都还是默认的。
所以，我们需要将其统一化，在这里我使他们都用style来设置宽和高，不用width和height属性。修改后的代码如下：
function creatInsertStr(url,width,height,id,align,classname,type){
width += "";
height += "";
if(width.indexOf("px") == -1){
width+="px";
}
if(height.indexOf("px") == -1){
height+="px";
}
var str;
switch (type){
case 'image':
str = '<img ' + (id ? 'id="' + id+'"' : '') + ' a="'+ width +'" b="' + height + '" _url="'+url+'" class="' + classname + '"' +
' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+' width:'+width+'; height:'+height+'" />'
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 + '" ' + (align ? ' style="float:' + align + '"': '') +
'style="width:'+width+';height:'+height+'" controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;
}
return str;
}
function switchImgAndVideo(root,img2video){
utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){
var className = node.getAttr('class');
var rWidth = node.getStyle("width");
var rHeight = node.getStyle("height");
if(className && className.indexOf('edui-faked-video') != -1){
var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),rWidth,rHeight,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'),rWidth,rHeight,null,node.getStyle('float') || '',className,img2video ? 'video':'image');
node.parentNode.replaceChild(UE.uNode.createElement(html),node);
}
})
}
我们在传入给creatInsertStr参数时，使用node.getStyle方法获得的元素style中的高和宽，而在creatInsertStr方法中，我们将高和宽设置到style中，并将width和height属性重命名或者删掉，这样，我们就统一了从可视化编辑到源代码所使用的尺寸，这样就可以解决尺寸无法保存的问题。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
