layedit富文本,图片大小限制完美解决方案

最近使用了layedit的富文本,不过出现一个小问题,图片上传后,图片大小不受限制,这就导致,当图片过大时就会出现编辑器中,图片只会展示部分,而且当展示页渲染时,图片也是按照原始比例展示,这并不是我们想要的。

于是我查看了一些博客,主要改法有两种:

1.修改layedit.js的img样式

在js中搜“"img{display: inline-block”,这里其实放的是,layedit编辑器中图片的css样式,然后我们加个样式:“max-width:95%
在这里插入图片描述
然后看下效果吧,编辑器里,确实限制了95%
在这里插入图片描述
不过呢,这只是编辑器,当页面前端展示的时候,不好意思,没这个了(图片很大我缩小浏览器的结果),这并不是我想要的,我想要的是图片在编辑和展示的时候都能带这个样式
在这里插入图片描述

一种方案不合适,那么我们看另一种吧。

2. 修改layedit.js的uploadImage方法

在js中搜索“uploadImage”关键字,然后寻找“src:e.data.src,alt:e.data.title”关键字,然后增加“width:'100'”出现下图示,
在这里插入图片描述
但是这种情况,有个问题,如果我上传的图片本身就不是很大,那么这种可能会强行会把图片拉伸,

这也不是我想要的结果。

3.个人感觉完美的方式

src,alt 都是img的属性,那么我加个style呢?

style:"max-width:95%"

试试吧
在这里插入图片描述
效果出来了:
在这里插入图片描述
再看前端展示:
在这里插入图片描述
在这里插入图片描述
最后瞄一眼数据库存的:
在这里插入图片描述

好了效果达到了,既在编辑时和展示时限制了大图,又没有影响小图

最后再说一下,操作方法:

layedit.js中,搜索“src:e.data.src,alt:e.data.title”,在后面加上

,style:"max-width:95%"

即可,最大宽度限制值根据你的需要。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值