解决layui的富文本编辑器中图片的大小问题

最新推荐文章于 2022-07-20 11:13:27 发布
原创 最新推荐文章于 2022-07-20 11:13:27 发布 · 4.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui #富文本 #图片大小 #layedit

本文介绍如何在layedit.js富文本编辑器中修改图片样式，使其在弹出框中自适应显示，通过在layedit.js中加入width:100%;实现图片超过弹出框大小后充满整个弹出框。

这是没修过之前的样式：

 

在网上百度了一下，发现大部分都是在layedit.js的所以img中设置style，

但是后来我发现，富文本中的图片本来就有属性

然后我就在layedit.js中搜索了一下inline-block，找到了设置图片样式的地方

然后加入了width:100%;，如果你要用其他样式，就可以在该地方加

 

这是修改完成的样式（图片超过弹出框大小后，然后就充满弹出框）：

从接口获取的是富文本，富文本中的图片太大溢出屏幕的解决办法（针对浏览器及微信小程序）
weixin_52276970的博客
08-25 3028
从接口获取的是富文本，富文本中的图片太大溢出屏幕的解决办法
解决layui富文本编辑器图片上传无法回显的问题
10-16
在使用layui富文本编辑器进行网页开发时，开发者经常会遇到一个普遍的问题，即上传图片后图片无法在富文本编辑器中正确回显的问题。这个问题困扰了不少开发者，究其原因，主要在于富文本编辑器的图片上传插件对于...
layui富文本上传图片,自动设置图片的宽度
路漫漫其修远兮 吾将上下而求索
02-28 1027
后台使用layui进行文章内容编辑，前端显示时候宽度会超过需要显示的宽度,通过修改layedit.js文件来进行设定
layui，上传图片，限制格式，限制大小
zxp_smile的博客
11-17 5819
var uploadInst = upload.render({ acceptMime: 'image/*', ext: 'jpg|png|gif|bmp|jpeg', before: function(obj){ obj.preview(function(index, file, result){ if(file.size >20*1024*1024){ //判断上传每个图片大小 .
不修改源码的情况下，解决layui 富文本中图片大小的问题
qq_23835707的博客
12-10 362
var index= layedit.build('demo'); $("#LAY_layedit_"+index).contents().find("img").css("width","100%"); 重点就是 css(“width”,“100%”)
layui框架中富文本图片上传大小设置
m0_37632915的博客
05-23 3230
使用layui的富文本编辑器时，上传图片页面只能原样显示，所以对框架文件进行了修改： 文件位置：layui/lay/modules/layedit.js 可以搜索’src’,大致位置如上图所示，style为本人所添加的样式。 ...
layui 富文本 layedit.js 字体大小 字体颜色背景颜色
最新发布
01-20
layui 富文本编辑器 layedit.js 是一款功能全面的编辑工具，它不仅包含了基本的文字编辑功能，还扩展了许多高级功能。这些功能的集合使得 layedit.js 成为了一个强大的内容编辑解决方案，适用于从简单博客文章到复杂...
美化后的layui富文本编辑器，layedit 美化
09-08
在这个主题中，我们关注的是layedit，layui的内置富文本编辑器。layedit是layui提供的一款轻量级、可高度定制的富文本编辑器，适用于网页中的内容编辑和创建。经过美化后，它的用户体验和视觉效果得到了显著提升。 ...
Layui带视频、字体等的富文本编辑器layedit.js
08-20
新增的有 tool: [ 'redo'//重做 ,'undo'//撤销 ,'fontfamily'//字体 ,'fontSize'//字体大小 ,'video' //插入视频 ]
LayEdit(layer 富文本编辑器使用，包含图片的上传)
10-18
layer 富文本编辑器layedit与form的使用，包含form提交时获取富文本的内容以及编辑器的图片上传
layui+springMvc富文本编辑器图片上传功能.rar
01-14
标题 "layui+springMvc富文本编辑器图片上传功能.rar" 提供的是一个集成layui富文本编辑器与SpringMvc后台服务的图片上传解决方案。这个压缩包包含了一整套用于实现这一功能的代码和配置，适用于使用Java开发的Web...
layedit富文本，图片大小限制完美解决方案
小张的老头儿的博客
02-20 4845
最近使用了layedit的富文本，不过出现一个小问题，图片上传后，图片大小不受限制，这就导致，当图片过大时就会出现编辑器中，图片只会展示部分，而且当展示页渲染时，图片也是按照原始比例展示，这并不是我们想要的。 于是我查看了一些博客，主要改法有两种： 1.修改layedit.js的img样式 在js中搜“"img{display: inline-block”,这里其实放的是，layedit编辑器中对...
关于layui 富文本上传图片的时候图片很大，设置图片的宽高
weixin_43612234的博客
03-05 6164
之前用layui 富文本编辑器的时候，上传较大的图片时，图片显示不全，而且编辑起来非常的不便，这样的用户体验是非常不好的，想了好久没想出办法， 1.找到layedi.js 文件 路径：layui/lay/modules/layedit.js，如下图： 搜索 src 在src中加入即可 style:'display:inline-block;max-width:50%;height:auto' ...
layui上传照片（控制图片大小）
List_Change的博客
12-17 6764
upload.render({ elem: '.file_'+a1 ,url: '../file/fileUpload' , accept: 'images' /*, field: 'file'//后台接收参数名 ,d...
layedit upoladimage 设置图片大小，解决跨域问题。
cnq2328的专栏
06-19 1931
layedit uploadimage设置图片大小、传参等设置 在使用layedit富文本编辑器，上传图片接口时，只能设置两个参数： layedit.set({ uploadImage: { url: '' //接口url ,type: '' //默认post } }); //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。 layedit.build('demo'); //建立编辑器 此外，其它任何设置都无效，包括设置图...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
苦夏木禾
07-20 2598
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
layui上传图片控制图片的宽高
admincg的博客
03-27 3718
layui上传图片控制图片的宽高 手册定位 此处需要控制为 false，不然上传时直接自动上传了，上传前的回调方法就调用不了了 var uploadInst = upload.render({ elem: '#test1' ,url: "{:url('admin/upload/uploadLocality')}" ,acce...
给layui的upload加了文件大小限制
热门推荐
http://kingim.cn/
07-31 1万+
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License：MIT */layui.define('layer' , function(exports){ "use strict"; var $ = layui.jquery; var layer = layui.layer; var device = layui.de
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值