百度ueditor 多个实例时图片缩放框错位bug修复

 今天发现同一个页面存在多个ueditoer编辑器时上传图片后点击图片会出现图片缩放框错位的问题 

   正常情况下如图, 图片四周会显示出缩放框

当有多个ueditor富文本编辑框都上传图片时点击图片会出现如下错位:

   

  图片缩放框出现了错位。

 仔细调试了 umeditor.js代码后发现在8888行代码出现了问题(版本:UEditor Mini版本  1.2.2)

 attachTo: function ($obj) {
            var me = this,
               imgPos = $obj.offset(),
               $root = me.root(),
               $wrap = me.defaultOpt.$wrap,
               posObj = $wrap.offset();
            posObj = $wrap.offset();
            me.data('$scaleTarget', $obj);
            me.root().css({
                position: 'absolute',
                width: $obj.width(),
                height: $obj.height(),
                left: imgPos.left - posObj.left - parseInt($wrap.css('border-left-width')) - parseInt($root.css('border-left-width')),
                top: imgPos.top - posObj.top - parseInt($wrap.css('border-top-width')) - parseInt($root.css('border-top-width'))
            });
        },

 问题出在这行代码  $wrap = me.defaultOpt.$wrap, =>me.defaultOpt.$wrap  按照代码逻辑应该是指向了当前要选中图片的的所属ueditor div对象,但是它实际上指向的不是当前图片所在的编辑器div对象,所以添加了几行判断代码解决了这个bug

 attachTo: function ($obj) {
        var me = this,
           imgPos = $obj.offset(),
           $root = me.root(),
           $wrap =null;
        //解决同一个页面有多个编辑器实例点击图片时候出现缩放框错位问题
        if (this._$el[0].parentElement != this.defaultOpt.$wrap[0]) {
            $wrap = $(this._$el[0].parentElement);
        }
        else {
            $wrap = me.defaultOpt.$wrap;
        }
        posObj = $wrap.offset();
        me.data('$scaleTarget', $obj);
        me.root().css({
            position: 'absolute',
            width: $obj.width(),
            height: $obj.height(),
            left: imgPos.left - posObj.left - parseInt($wrap.css('border-left-width')) - parseInt($root.css('border-left-width')),
            top: imgPos.top - posObj.top - parseInt($wrap.css('border-top-width')) - parseInt($root.css('border-top-width'))
        });
    },

 解决问题前查了查发现网上也有不少碰到这个问题的

 https://tieba.baidu.com/p/5724906598?red_tag=2417469440 

https://blog.csdn.net/qq_35405240/article/details/82786590  这个应该是没发现问题根本所在

 

 希望baidu工程师或者ueditoer 开源开发者可以修正这个bug 

如果您觉得我的文章对您有所帮助,欢迎扫码进行赞赏!

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晨4点5杀老大爷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值