如何解决百度编辑器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.www.yii666.comy -
              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(文章来源地址https://www.yii666.com/apps/198.htmlme.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) 文章来源站点https://www.yii666.com/+ 'px',
            //修改前文章来源地址https://www.yii666.com/apps/198.html
            /www.yii666.com/'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选择框选区错位问题?

其他相关文章
    领支付宝红包赞助服务器费用
    微信公众号:小猪波罗蜜
    关注公众号,回复999,可联系站长解答疑问哦。每天分享更多有趣的事儿,有趣有料!
    99人已关注

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信图片_20190322181744_03.jpg

    微信扫一扫打赏

    请作者喝杯咖啡吧~

    支付宝扫一扫领取红包,优惠每天领

    二维码1

    zhifubaohongbao.png

    二维码2

    zhifubaohongbao2.png