Code implementation of uploading picture pop-up layer using rich text editor

The content of this article is about the code implementation of using the rich text editor to upload the image pop-up layer. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I asked a question two days ago, mainly because I am lazy and wanted to find a ready-made image that I uploaded before.
Regarding this, I found that there is no similar project in the entire community. I tried it out today and got the following results

Customize the toolbar on the editor and add a new Created a menu cloud disk.
Click on the cloud disk and a pop-up window similar to an emoticon will pop up as follows
This is what I have always wanted to make a pop-up window similar to UEditor.
After modification, the images and files previously uploaded by users can be called up in the editor. There is no need to modify the images uploaded by the editor.
Core Code
1. Customize the editor toolbar

//全局配置 that.config = { //默认工具bar tool: [ 'strong', 'italic', 'underline', 'del' ,'|' ,'left', 'center', 'right' ,'|' ,'link', 'unlink', 'face', 'image', 'yunpan' //新增部分 ] ,hideTool: [] ,height: 240 //默认高 };

2. Add a new click event

//全部工具 ,tools = { html: '' ,strong: '' ,italic: '' ,underline: '' ,del: '' ,'|': '' ,left: '' ,center: '' ,right: '' ,link: '' ,unlink: '' ,face: '' ,yunpan: '' //新增的部分 ,image: '' ,code: '' ,help: '' }

3. Cloud disk panel

//云盘面板 ,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('') }); }

Other details are difficult to display because they involve project data.

Related recommendations:

Rich text editor Problems related to deleting pictures

A brief analysis of the Yii2 integrated rich text editor redactor Example tutorial php rich text editor java rich text editor jsp rich text editor

The above is the detailed content of Code implementation of uploading picture pop-up layer using rich text editor. For more information, please follow other related articles on the PHP Chinese website!