UEditor 解决拖拽视频元素改变视频尺寸时，无法保存视频尺寸问题的解决方法

来源：互联网发布：单片机算嵌入式系统编辑：程序博客网时间：2024/04/19 18:56

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属性重命名或者删掉，这样，我们就统一了从可视化编辑到源代码所使用的尺寸，这样就可以解决尺寸无法保存的问题。

0 0