在使用ueditor
的编辑器时,需要让用户对插入的图片进行拉伸修改大小。当ueditor
的编辑框内图片过大出现横竖向滚动条,且点击图片会错位,如图:
解决图片自适应屏幕大小
找到如下文件:\ueditor\themes\iframe.css
这个文件里,就能看到有这一句:/*可以在这里添加你自己的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;} /*去除点击图片后出现的拉伸边框*/
,根据网上搜索的方法,实际上没起作用,经过调试发现使用.edui-editor-imagescale {display: none !important;}
可去除点击图片拉伸边框效果。
解决点击图片错位问题
点击较大尺寸图片回出现错位,导致图片下面内容无法编辑,如图:
修改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.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.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
});
注释top
行为源代码,下一行为修改后的代码