[layui] layedit增加图片空间功能，方便直接从已上传资源中选择图片！

最新推荐文章于 2023-12-26 10:43:42 发布

原创最新推荐文章于 2023-12-26 10:43:42 发布 · 3.2w 阅读

2 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何在layedit富文本编辑器中添加自定义图片空间按钮，实现点击后弹出图片资源选择的功能。通过修改layedit.js源码，增加绑定事件，并调整layui.css样式，最终构建带有自定义功能的编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如下效果，点击图片空间按钮，弹出图片资源直接选择。

一、修改源码layedit.js。

1、给工具条C对象中添加自定义的图片空间按钮

imageZone: '<i class="layui-icon layedit-tool-imageZone" title="图片空间" layedit-event="imageZone">&#xe634;</i>'

修改后如下图：

2、给按钮增加绑定事件：

注：content: ['/admin/html/head.html?dir=img'], 为弹出页面的图片列表，这里自己自行去展示即可，逻辑就是从服务器读取某文件夹所有的图片，然后选中一张后返回给编辑器。

imageZone: function (a) {
                var n = this;
                var index = i.open({
                    type: 2,
                    title: '图片选择',
                    area: ['700px', '450px'],
                    content: ['/admin/html/head.html?dir=img'],
                    btn: ['确定选择'],
                    yes: function (index, layero) {
                        var body = layer.getChildFrame('body', index);
                        var _src = body.find('img.this').attr('src');
                        if (_src) {
                            v.call(t, "img", {
                                src: _src,
                                alt: _src
                            }, a);
                            i.close(index);
                        }
                        else {
                            layer.alert('您还没有选择任何一张图片！');
                        }
                    }
                })
            }

修改后如下图：

二、修改layui.css

1、在原有的图标大小css中增加自定义的这个图标的类，以防自己新增的图标大小跟预定义图标大小不一致

.layedit-tool-image,.layedit-tool-unlink,.layedit-tool-imageZone{font-size:18px!important}

三、修改完成后，构建编辑器时，参数中带上自定义的“imageZone”即可

如下图：