vue 使用ueditor图片编辑框错位 chrome

解决方案

问题：使用chrome浏览器时，ueditor图片编辑框发生错位，在其他浏览器可以正常显示。如下图：

解决方法：修改ueditor.all.js和ueditor.all.min.js （我vue项目只改了这个一个文件即可）文件中attachTo方法，重新加载页面即可。

具体步骤如下：

1、打开ueditor.all.js，搜索attachTo: function (targetObj)，并替换红色部分代码，注释掉的为原始代码：

domUtils.setStyles(resizer, {
   'width': target.width + 'px',
   'height': target.height + 'px',                    
   'left': iframePos.x + imgPos.x - (me.editor.document.documentElement.scrollLeft||me.editor.document.body.scrollLeft) - editorPos.x - parseInt(resizer.style.borderLeftWidth) + 'px',
   'top': iframePos.y + imgPos.y - (me.editor.document.documentElement.scrollTop || me.editor.document.body.scrollTop) - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
  // 'left': iframePos.x + imgPos.x - me.editor.document.body.scrollLeft - editorPos.x - parseInt(resizer.style.borderLeftWidth) + 'px', fixed: chrome中图片编辑框出现错位问题
  // 'top': iframePos.y + imgPos.y - me.editor.document.body.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
});

2、打开ueditor.all.min.js,搜索attachTo:function(a)，并替换部分代码（这个是必须要改的） 

原始代码：

left:f.x+e.x-b.editor.document.body.scrollLeft-g.x-parseInt(d.style.borderLeftWidth)+"px",
top:f.y+e.y-b.editor.document.body.scrollTop-g.y-parseInt(d.style.borderTopWidth)+"px"

正确代码：

left:f.x+e.x-(b.editor.document.documentElement.scrollLeft||b.editor.document.body.scrollLeft)-g.x-parseInt(d.style.borderLeftWidth)+"px",
top:f.y+e.y-(b.editor.document.documentElement.scrollTop||b.editor.document.body.scrollTop)-g.y-parseInt(d.style.borderTopWidth)+"px"

修改之后的效果： 

已测试，在chrome、IE、Edge、UC浏览器均没有问题。