之前本站发布了一个关于UEditor编辑器在移动端图片被拉伸问题解决方法,但是经过反复的测试后,发现问题依然存在,不仅仅是存在于移动端,在PC端也是存在同样的图片变形问题,经过源码码网小编反复测试,贴出最佳解决方案。
1、首先找到ueditor/themes目录下的iframe.css,在其中添加以下css样式代码:
img{ max-width: 100%; /* 图片自适应宽度 */ } body{ overflow-y: scroll !important; } .view{ word-break: break-all; } .vote_area{ display: block; } .vote_iframe{ background-color: transparent; border: 0 none; height: 100%; } #edui1_imagescale{ display: none !important; /* 去掉点击图片后出现的拉伸边框 */ }
这段代码的作用就是限制在编辑器编辑的时候,由于图片的尺寸过大,超出编辑窗口,而形成的滚动条。
2、然后再找到ueditor目录下的ueditor.config.js文件,找到搜索找到以下代码,去掉前边的注释
iframeCssUrl: URL + '/themes/iframe.css'
按照以上操作步骤,基本上可以解决图片显示变形的问题,其原理就是让图片在上传的过程中,给图片设定好css属性。这里需要注意的是,在第二步中,URL之后,themes之前的斜杠问题,小编的URL在结尾自带了斜杠,而这里还有一个斜杠,造成了双斜杠即“//”这导致在谷歌浏览器中不能完全被识别,所以引入css失败,导致问题不能得到解决,但是在其他的浏览器,比如后火狐浏览器、微软的Edge浏览器中是可以正常识别,所以这里一定要注意,如果你的URL地址结尾已经带了斜杠,在第二步的时候,注意去掉themes前面的斜杠,否则可能会造成在谷歌浏览中问题得不到解决。