今天发现同一个页面存在多个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
如果您觉得我的文章对您有所帮助,欢迎扫码进行赞赏!