如何解决百度UEditor编辑器图片选区错位问题？
在使用百度开源编辑器UEditor的过程中，我们可能会遇到各种兼容问题，其中之一就是图片选区错位问题。本文将为您提供两种解决方案，帮助您轻松解决这个问题。
本文使用的UEditor版本为：1.5.0
当UEditor的编辑框不随内容的增加而调节高度时，实现的是编辑框内部滚动，这时可能会出现以下bug：蓝色的调节尺寸框与图片的位置不匹配。当内容较多时，下面的图片调节框在全屏下基本看不到。
解决方案
方法1
使用 ueditor.all.js 文件，不是ueditor.all.min.js文件
找到以下位置进行替换：
attachTo: function(targetObj) {
var me = this,
target = (me.target = targetObj),
resizer = this.resizer,
imgPos = domUtils.getXY(target),
iframePos = domUtils.getXY(me.editor.iframe),
editorPos = domUtils.getXY(resizer.parentNode);
domUtils.setStyles(resizer, {
width: target.width + "px",
height: target.height + "px",
left:
iframePos.x +
imgPos.x -
me.editor.document.body.scrollLeft -
editorPos.x -
parseInt(resizer.style.borderLeftWidth) +
"px",
top:
iframePos.y +
imgPos.y -
me.editor.document.body.scrollTop -
editorPos.y -
parseInt(resizer.style.borderTopWidth) +
"px"
});
}替换成：
attachTo: function(a) {
var b = this,
c = b.target = a,
d = this.resizer,
e = domUtils.getXY(c),
f = domUtils.getXY(b.editor.iframe),
g = domUtils.getXY(d.parentNode),
h = b.editor.document;
domUtils.setStyles(d, {
width: c.width + "px",
height: c.height + "px",
left: f.x + e.x - (h.documentElement.scrollLeft || h.body.scrollLeft || 0) - g.x - parseInt(d.style.borderLeftWidth) + "px",
top: f.y + e.y - (h.documentElement.scrollTop || h.body.scrollTop || 0) - g.y - parseInt(d.style.borderTopWidth) + "px"
});
}方法2
attachTo: function (targetObj) {
var me = this,
target = me.target = targetObj,
resizer = this.resizer,
imgPos = domUtils.getXY(target),
iframePos = domUtils.getXY(me.editor.iframe),
editorPos = domUtils.getXY(resizer.parentNode);
domUtils.setStyles(resizer, {
'width': target.width + 'px',
'height': target.height + 'px',
'left': iframePos.x + imgPos.x - me.editor.document.body.scrollLeft - editorPos.x - parseInt(resizer.style.borderLeftWidth) + 'px',
//修改前
//'top': iframePos.y + imgPos.y - me.editor.document.body.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
//修改后
'top': iframePos.y + imgPos.y - me.editor.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
});
}关键词：UEditor，编辑器，图片选区，错位问题，解决方案，兼容问题文章来源：https://www.toymoban.com/diary/apps/198.html
文章来源地址https://www.toymoban.com/diary/apps/198.html
到此这篇关于解决百度UEditor编辑器图片选区错位问题的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
