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

旧城等待， 2023-06-06 12:09 7阅读 0赞

这是没修过之前的样式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA0ODA0NQ_size_16_color_FFFFFF_t_70][]

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

![2019101116333494.png][]

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

![20191011163504308.png][]

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

![20191011164226484.png][]

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

![2019101116444046.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA0ODA0NQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA0ODA0NQ_size_16_color_FFFFFF_t_70]: /images/20230601/64c2e36f4e1049ceab80da8501791bda.png
[2019101116333494.png]: /images/20230601/f52662dfc510424aa0e104d088ef1922.png
[20191011163504308.png]: /images/20230601/797b036bd2e045079d910f71567d9c5d.png
[20191011164226484.png]: /images/20230601/69014c99323f482eb6b5c6dfffbea9b9.png
[2019101116444046.png]: /images/20230601/c97d0541eb014a3b9c18233c4e0566b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA0ODA0NQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/064fb980d9dd420c980bd06cc7247af7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui富文本编辑器图片上传无法回显问题解决

layui富文本编辑器用起来挺方便的，但是不足的是不提供图片上传的接口，需要自己写上传接口，而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求，否则图片可以上传成

﹏ヽ暗。殇╰゛Y/ 2024年02月18日 18:05/ 0 赞/ 76 阅读

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

这是没修过之前的样式： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

旧城等待，/ 2023年06月06日 12:09/ 0 赞/ 8 阅读

相关 layui 富文本编辑器的使用，及修改富文本的默认内容

html页面 <textarea class="layui-textarea" id="add_active_rich_text" style="display:

约定不等于承诺〃/ 2023年01月16日 06:20/ 0 赞/ 478 阅读

相关 layui中使用wangEditor富文本编辑器

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min

た入场券/ 2022年12月21日 00:59/ 0 赞/ 373 阅读

相关 layui 富文本编辑器

html部分 <textarea id="demo" lay-verify="content" name="explain" class="layui-textare

忘是亡心i/ 2022年11月05日 06:30/ 0 赞/ 567 阅读

相关 layui富文本编辑器

国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿、UI陈旧，随着Layui的发布，将重新为富文本做一些新的定义。LayEdit遵循极简的设计风格，无论是U

「爱情、让人受尽委屈。」/ 2022年10月16日 00:51/ 0 赞/ 388 阅读

相关 html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG

![5aaaddac4dbb2307489796843d65bb62.png][] ![94a6dc5feabd4193c6b752bf51a273a1.png][] 插件

柔光的暖阳◎/ 2022年10月06日 07:57/ 0 赞/ 444 阅读

相关 layui富文本编辑器添加图片回显问题详解

最近写项目中需要用到LayUI富文本编辑器，其他地方都挺好，唯独上传图片时，要不就是上传完成后回显404，要不就是访问时404（访问时我是新打开的一个页面），返回路径一直有问题

青旅半醒/ 2022年02月16日 02:22/ 0 赞/ 593 阅读

相关富文本编辑器 - layui.layedit的插入图片

效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

喜欢ヅ旅行/ 2022年02月13日 10:53/ 0 赞/ 475 阅读

相关 laravel使用layui富文本编辑器layedit上传图片419解决办法

laravel框架+layui做系统时，后台需要使用到富文本编辑器，首选当然简单的layui自带的layedit啦，不过上传图片时报错：“请求上传接口异常”，查看返回 “419

忘是亡心i/ 2021年12月21日 10:35/ 0 赞/ 794 阅读