express+multer实现layedit富文本编辑器图片上传新增查看源码功能

浅浅的花香味﹌ 2022-10-14 00:47 235阅读 0赞

## express+multer实现layedit富文本编辑器图片上传 ##

### `新增layedit查看源码功能` ###

源码地址：https://gitee.com/yango520/yg\_layedit

1.  首先使用express创建一个项目server

express server

1.  然后初始化项目

//进入server目录
    cd server

//初始化项目

cnpm install

1.  安装所需要的依赖库

//multer用来处理文件上传
    cnpm install multer --save
    
    //express-art-template和art-template是html渲染模版引擎
    cnpm install --save express-art-template art-template

1.  打开app.js编辑

// multer用于处理 multipart/form-data 类型的表单数据,需要引入multer库
    const multer = require('multer');
    // 自定义保存文件名
    let storage = multer.diskStorage({ 
    	destination: 'public/uploaded/',
    	filename: function(req,file,cd){ 
    		//获取后缀名
    		const extname = path.extname(file.originalname)
    		cd(null , file.fieldname + Date.now() + extname)
    	}//是自定义的文件名。
    })
    let upload = multer({ storage:storage}).single('file');//file为上传时的name值。
    
    // 上传图片接口
    app.post('/uploader', upload, function (req ,res, next){ 
    	const url = '/' + req.file.path;
    	res.json({ 
    		code: 0, 
    		msg: '上传成功！', 
    		data: { 
    			src: url,
    			title: req.file.originalname
    		}
    	})
    })
    
    // 渲染前端页面
    app.get('/layedit', (req, res, next) => { 
    	res.render('index.html');
    });
    
    // html渲染模版引擎，需要引入express-art-template和art-template两个库
    app.engine('html',require('express-art-template'));

1.  下载layui，layui官网传送门: https://www.layui.com
2.  layedit文档传送门: https://www.layui.com/doc/modules/layedit.html
3.  在views目录下添加index.html,编辑新增查看源码功能（这是网上前辈写的，我直接copy过来改了一下）

// 初始化富文本编辑器
    		var layedit = null,
    			index = null;
    		layui.use('layedit', function() { 
    			layedit = layui.layedit;
    			layedit.set({ 
    				// 请求上传图片接口
    				uploadImage: { 
    					url: '/uploader',
    					type: 'post',
    					success: function(res){ 
    						console.log(res);
    					}
    				}
    			});
    			//建立编辑器
    			index = layedit.build('yg_editor', { 
    				height: 400
    			});
    		
    			// 通过官方的layedit创建方法获取到index后，调用以下方法添加显示源码功能
    			setHtmlCodeToEdit('layui-layedit', index); //设置源码菜单
    			
    			// 在提交数据时，需要判断一下，如果是HTML编码的，解码后再提交数据到后台
    			let context = layedit.getContent(index); //这里是前面获取到index
    			if (context.length > 0) { 
    				if (context.indexOf('<') >= 0) {  //需要进行解码
    					$(document.getElementById("LAY_layedit_" + index)).contents().find("body").html(HtmlUtil.htmlDecode(context));
    				}
    				//同步到编辑框
    				layedit.sync(index);
    			}
    		});
    		//动态添加编辑器源码查看编辑功能
    		function setHtmlCodeToEdit(ele,id) { 
    			$('.' + ele + ' .layui-layedit-tool').append(` <span class="layedit-tool-mid"></span> <i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" οnclick="getHtml(this,'${ id}')"></i> `);
    		}
    		//显示原代码
    		function getHtml(boj, index) { 
    			layui.use('layedit', function() { 
    				var layedit = layui.layedit,
    					$ = layui.jquery;
    				let context = layedit.getContent(index);
    				if ($(boj).hasClass('layui-icon-code-circle')) { 
    					$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body").html(HtmlUtil.htmlEncode(context));
    					$(boj).removeClass("layui-icon-code-circle");
    					$(boj).addClass("layui-icon-layouts");
    					$(boj).attr("title", "查看HTML");
    				} else if ($(boj).hasClass('layui-icon-layouts')) { 
    					$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body").html(HtmlUtil.htmlDecode(context));
    					$(boj).removeClass("layui-icon-layouts");
    					$(boj).addClass("layui-icon-code-circle");
    					$(boj).attr("title", "查看源码")
    				}
    			});
    		}
    
    		var HtmlUtil = { 
    			/*1.用浏览器内部转换器实现html转码*/
    			htmlEncode: function(html) { 
    				//1.首先动态创建一个容器标签元素，如DIV
    				var temp = document.createElement("div");
    				//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
    				(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
    				//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
    				var output = temp.innerHTML;
    				temp = null;
    				return output;
    			},
    
    			/*2.用浏览器内部转换器实现html解码*/
    			htmlDecode: function(text) { 
    				//1.首先动态创建一个容器标签元素，如DIV
    				var temp = document.createElement("div");
    				//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
    				temp.innerHTML = text;
    				//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
    				var output = temp.innerText || temp.textContent;
    				temp = null;
    				return output;
    			}
    		};

1.  这里介绍一个node的自启动/热更新库`supervisor`，传送门
2.  最后直接运行`supervisor ./bin/www`，run项目，默认端口3000，我这里改为3001，所以，直接在浏览器访问`http://localhost:3001/layedit`
3.  最后看一下效果图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1]
4.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]: /images/20221014/fb9352fde16f49109d0ad1607a96a667.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1]: /images/20221014/872cf71c076b43a9ac28e637785fccb4.png