本篇文章给大家带来的内容是关于使用富文本编辑器上传图片弹出层的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
前两天提了一个问题，主要是由于自己比较懒，想找一个现成的调用之前上传的图片。
对此我发现整个社区都没有类似的项目，今天特别摸索了一下，得到效果如下
在编辑器上自定义工具栏，新增了一个菜单云盘。
点击云盘弹出一个类似表情的弹窗如下
这就是我一直想弄一个类似UEditor弹窗。
经过改造把用户之前上传的图片与文件都可以在编辑器上调用出来。编辑器上传图片不用修改。
核心代码
1、自定义编辑器工具栏
//全局配置
that.config = {
//默认工具bar
tool: [
'strong', 'italic', 'underline', 'del'
,'|'
,'left', 'center', 'right'
,'|'
,'link', 'unlink', 'face', 'image', 'yunpan' //新增部分
]
,hideTool: []
,height: 240 //默认高
};2、新增点击事件
//全部工具
,tools = {
html: ''
,strong: ''
,italic: ''
,underline: ''
,del: ''
,'|': ''
,left: ''
,center: ''
,right: ''
,link: ''
,unlink: ''
,face: ''
,yunpan: '' //新增的部分
,image: ''
,code: ''
,help: ''
} 3、云盘面板
//云盘面板
,yunpan=function(options, callback){
//云盘
var body = this, index = layer.open({
type: 1
,id: 'LAY_layedit_yunpan'
,area: '600px'
,shade: 0.05
,shadeClose: true
,moveType: 1
,title: '企业云盘'
,skin: 'layui-layer-msg'
,content:[''
,''
,'- 产品图片
'
,'- 头像
'
,'- LOGO
'
,'- 轮播图片
'
,'- 其他图片
'
,'- 文档文件
'
,'
'
,''
,'这里还没有加载产品图片'
,'内容2'
,'内容3'
,'内容4'
,'内容5'
,'内容6'
,''
,' '].join('')
});
}其他细节由于涉及到项目数据，不便展示。
相关推荐：
