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

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

 

一、修改源码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”即可

如下图：