天天看点

UEditor 上传图片尺寸缩放 并保持到网页显示的方法解决

目前搜索到的方法都是在ueditor上编辑框内显示解决问题的方法,如果一旦用getcontent()或者点击源码之后在前端就会变成正常

的图片尺寸。

其实问题是出在getcontent()方法是过滤编辑框的信息的,所以只需要把img 内的style 设置白名单就好了~

第一步

在ueditor.all.js里找到

callback()

加入lorder.style="width:yoursize";

if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src',link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                            ///加入样式
                            loader.style = "width:100px";
  }
           

第二步

在ueditor.config.js里找到

whitList:

在img: 添加 'style’

img:  ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style'],
           

做完以上两步 ueditor 对图片的样式设置就可以保存了~