解决百度UEditor编辑器图片选区错位问题

如何解决百度 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

到此这篇关于解决百度 UEditor 编辑器图片选区错位问题的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！

原文地址:https://www.toymoban.com/diary/apps/198.html

如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！