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

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

一、修改源码layedit.js。

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

imageZone: '<i class="layui-icon layedit-tool-imageZone" title="图片空间" layedit-event="imageZone"></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”即可

如下图：

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

java图片上传同时后台直接给MultipartFile对象添加图片水印或者文字水印,然后直接上传带水印的图片
本文只介绍给文件上传对象(MultipartFile )加水印,然后再进行文件上传的业务话不多说,直接上代码,都是静态方法 1.图片水印 1.先上工画图片水印的方法 /*** 加图片水印 ** @p ...
织梦网站上传服务器不显示图片,织梦网站图片不显示图片
织梦网站图片不显示图片内容精选换一换在"文章列表"插件中,检查"设置 > 列表数目"的"显示文章条数"和"显示分页&q ...
宝贝上传店铺后把图片空间的图片删了有影响吗
问题1:调用SPU服务异常,原因是:已存在产品ID为:[2154156604] 的产品"} 解决方案:经过分析,这是因为上传的店铺内,已经存在产品ID为:[21541 ...
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图一.第一步引入image-cropper,放在dist文 ...
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码 ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
java 上传图片后没法立马显示出来_SpringMVC多个文件上传及上传后立即显示图片功能...
多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 packag ...
java 移动页面中的图片上传_移动端图片操作——上传
上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

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

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

最新文章

热门文章