解决 百度 ueditor编辑器 改变图片大小时 调节框与图片错位 问题

本文介绍了在使用百度UEditor编辑器时遇到的图片大小调节框与图片位置不对应的问题,并提供了修改ueditor.all.js文件的解决方案,通过调整大约17448行的代码来解决这一现象。此外,还给出了CSS隐藏图片大小调节框的代码以及相关参考链接。

版本:

/*!
 * UEditor Mini版本
 * version: 1.2.2
 * build: Thu Dec 22 2016 16:36:28 GMT+0800 (CST)
 */

现象:

 这里调节框与图片错位:

修改ueditor.all.js文件的大约17448行为:

'top': iframePos.y + imgPos.y - me.editor.window.scrollY - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'

 修改后:

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.window.scrollY - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
                    });
                }

 

当然,如果你不需要让用户添加图片大小可以直接在css文件里设置
#edui1_imagescale{display:none !important;} /去除点击图片后出现的拉伸边框/

参考:https://tieba.baidu.com/p/5724906598?red_tag=2417469440

https://blog.csdn.net/qq_35405240/article/details/82786590

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值