Tinymce富文本编辑器图片上传插件参数的修改

近日客户表示上传的图片过大，无法自动匹配展示区域

由于使用的是Tinymce富文本编辑器自带的图片上传插件，选择图片后会读取对应图片的长和宽，客户又不愿意手动去修改长宽比去适应显示界面，希望自动适配，网上看了很多，有很多是重写一个图片上传插件，我这里并没有那么复杂，于是简单阅读了一下源码

在此目录下，是图片上传的逻辑代码

 在此目录下修改如下代码即可

 

 图中img.width和img.height为上传图片原始长和宽，需要最终展示的图片大小只要对这两个参数对判断和等比例的计算即可。

 

vue修改tinymce富文本编辑器默认上传图片尺寸大小 设置tinymce富文本编辑器图片过大适配

tinymce富文本编辑器的上传图片大小默认为100%，可以在content.min.css.js里设置默认上传图片的大小
如下代码所示，这样默认上传的图片大小是富文本编辑器的80%，而且图片也不会变形。对于原尺寸不超过富文本编辑器80%宽度的图片不会受改变

.mce-content-body p img{
  max-width: 80%;
  width: auto;
  height: auto;
}

 

 

原博客: Tinymce富文本编辑器图片上传插件参数的修改       vue修改tinymce富文本编辑器默认上传图片尺寸大小 设置tinymce富文本编辑器图片过大适配