当编辑框高度固定可内部滚动时,ueditor插入图片调节框显示bug

在使用百度euditor的编辑器时,我们常常需要让用户对插入的图片进行拉伸修改大小。当euditor的编辑框不随内容的增加而调节高度时,实现的是编辑框内部滚动时,就会出现以下bug,如图:
出现的蓝色调节尺寸的框与图片的位置相差比较多,当内容比较多是,下面的图片调节框在全屏下基本看不到,如下图的小兵调节框

这个高度调节可以通过修改ueditor.all.js的代码来实现调节框位置与图片位置一致。如下

原代码17097行:‘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’;
实现之后调节框与图片位置就一致了。如图:

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

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

ueditor 图片选区错位问题,图片无法正常缩放的更多相关文章

  1. 首页商品图片显示错位,easy-popular批量上传

    =============关于zencart批量商品管理的说明================== 首先,安装好批量商品管理模块,设置 /tempEP 目录可写二.确认你已经在后台增加了一些分类目录. ...

  2. 微服务迁移记(五):WEB层搭建(5)-集成ueditor编辑器,伪分布式图片上传

    一.redis搭建 二.WEB层主要依赖包 三.FeignClient通用接口 以上三项,参考<微服务迁移记(五):WEB层搭建(1)> 四.SpringSecurity集成 参考:< ...

  3. ueditor批量上传word图片

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  4. java实现批量下载百度图片搜索到的图片

    就是写的个小程序,用于记录一下,方便后续查看,首先感谢下面这个博客,从这篇文章衍生的吧,大家可以学习下: http://www.cnblogs.com/lichenwei/p/4610298.html ...

  5. PHPThumb处理图片,生成缩略图,图片尺寸调整,图片截取,图片加水印,图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

  6. 在word里插入图片,并设置图片的格式

    由于公司业务需要,需要在生成的word里插入图片(公司印章),仔细想了下,还是在word模板里添加一个书签,然后再该书签的位置插入图片,并设置图片的格式方便些: 代码如下: using System; ...

  7. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  8. c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe

    把彩色图片转换为灰色的图片,直接用.net接口遍历每个像素点转换的效率非常低,800K的图片65万像素我的电脑要用5分钟,而用了unsafe,速度提高了几千倍,同样的图片只用了0.几秒 附一个常用的遍 ...

  9. JQuery 实现鼠标经过图片高亮显示,其余图片变暗

    效果图: 当鼠标经过图片时,其余图片变暗,来高亮显示当前图片,主要用的是对比度.当然你也可以先把其他图片默认变暗,鼠标经过时高亮显示,不过,无鼠标经过时整体图片都会是偏暗色调. 效果可以通过 三步实现 ...

随机推荐

  1. Vue-img-preload

    预加载页面上的图片资源,提高用户体验 效果预览 使用方法 下载vue-img-preload插件 npm install vue-img-preload 配置参数 eachLoaded(functio ...

  2. 转:Java Web 项目发布到Tomcat中三种部署方法

    首先整理项目文件,文件内包含jsp.js等和class编译后的文件及lib包,如: 第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加:   ...

  3. 工作总结 页面 ActionResult / JsonResult 将对象以 Json() 返回

    其实都不用在页面上序列化   打印 都不需要在页面上 像这样  var ajaxResult = eval("(" + data + ")");  序列化为对象 ...

  4. mysql启动失败,unit not found

    1 mysql启动 Failed to start mysqld.service: Unit not found.   2 查询/etc/init.d/下是否存在mysqld ll /etc/init ...

  5. 牛客练习赛53 D 德育分博弈政治课 (思维建图,最大流)

    牛客练习赛53 D德育分博弈政治课 链接:https://ac.nowcoder.com/acm/contest/1114/D来源:牛客网 题目描述 德育分学长最近玩起了骰子.他玩的骰子不同,他的骰子 ...

  6. Map遍历效率 : entrySet > keySet

     1    //entrySet()  2     for (Entry<String, String> entry : map.entrySet()) {  3         Stri ...

  7. Codeforces Round #512 (Div. 2, based on Technocup 2019 Elimination Round 1) E. Vasya and Good Sequences(DP)

    题目链接:http://codeforces.com/contest/1058/problem/E 题意:给出 n 个数,对于一个选定的区间,区间内的数可以通过重新排列二进制数的位置得到一个新的数,问 ...

  8. vs2015 远程调试web

    1.找到vs2015远程调试器 针对服务器版本选择 X64 .X86,把文件夹复制到服务器 2.在服务器中运行:msvsmon.exe 选择 工具->选项,修改成 无身份验证,允许任何用户进行调 ...

  9. 13 110内容回、111内容回顾、redis操作

    redis加入路飞项目

  10. 之前写的关于chromedp的文章被别人转到CSDN,很受鼓励,再来一篇golang爬虫实例

    示例说明:用chromedp操作chrome,导航到baidu,然后输入“美女”,然后再翻2页,在此过程中保存cookie和所有img标签内容,并保存第一页的baidu logo为png 注释已经比较 ...