如何解決百度UEditor編輯器圖片選區(qū)錯位問題？

在使用百度開源編輯器UEditor的過程中，我們可能會遇到各種兼容問題，其中之一就是圖片選區(qū)錯位問題。本文將為您提供兩種解決方案，幫助您輕松解決這個問題。

本文使用的UEditor版本為：1.5.0

當UEditor的編輯框不隨內(nèi)容的增加而調(diào)節(jié)高度時，實現(xiàn)的是編輯框內(nèi)部滾動，這時可能會出現(xiàn)以下bug：藍色的調(diào)節(jié)尺寸框與圖片的位置不匹配。當內(nèi)容較多時，下面的圖片調(diào)節(jié)框在全屏下基本看不到。

解決方案

方法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，編輯器，圖片選區(qū)，錯位問題，解決方案，兼容問題

文章來源地址http://www.zghlxwxcb.cn/article/198.html

到此這篇關于解決百度UEditor編輯器圖片選區(qū)錯位問題的文章就介紹到這了,更多相關內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！