ueditor图片编辑框错位怎么办

PHPz
PHPz 原创
2020-09-04 14:21:00 2496浏览

ueditor图片编辑框错位的解决办法:首先打开“ueditor.all.js”文件;然后修改代码为“attachTo: function(a) {domUtils.setStyles(d, {}}”;最后重新加载修改后的js即可。

ueditor图片编辑框错位怎么办?

百度编辑器百度官方已经停止更新了,但是很多系统尤其是很多流行cms还是使用他,前不久有个项目就碰到了这个问题,后来研究了下,把这个问题给修复了,主要问题是在在最新的谷歌及其他浏览器内核的情况下会出现错位情况。如下图:

企业微信截图_15921864213453.png

谷歌等新版浏览器,如使用百度编辑器编辑图片,出现编辑器错位的问题,大家可以作如下修改:

修改api\ueditor\ueditor.all.js或api\ueditor\ueditor.all.min.js(视后台编辑器引入文件进行修改)

查找:attachTo: function (targetObj) {}函数

并使用以下代码替换:

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"
                })
            }

未修改前源代码:

企业微信截图_15921864321830.png

修改后:

企业微信截图_15921864371799.png

前端重新加载下修改后的js就大功告成了。

更多相关知识,请访问PHP中文网

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。