UEditor百度富文本編輯器，解決圖片點擊錯位的問題

因項目中采用的是百度的富文本編輯器UEditor，然后圖片尺寸較大，點擊圖片想要修改尺寸，就出現了錯位的問題，這里記錄一下。

 

如下圖是錯位的截圖：

 

 

 可以明顯的看出這個提示的框出現了錯位的問題，然后怎么解決呢？

 

1.打開項目，找到UEditor官網下載的文件：ueditor.all.js

 

 

2.然后找到找到這個函數：attachTo: function (targetObj){}

 

 

代碼如下：

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'
                });
            }

 

 

3.注釋的是原來的方法，然后我們修改一下，再來看下效果：

 

 

 

 

 

轉載地址：改造：ueditor插入的圖片自適應編輯框大小，點擊圖片錯位問題