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

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

新增layedit查看源码功能

源码地址：https://gitee.com/yango520/yg_layedit

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

express server

2. 然后初始化项目

//进入server目录
cd server

//初始化项目

cnpm install

3. 安装所需要的依赖库

//multer用来处理文件上传
cnpm install multer --save

//express-art-template和art-template是html渲染模版引擎
cnpm install --save express-art-template art-template

4. 打开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'));

5. 下载layui，layui官网传送门: https://www.layui.com
6. layedit文档传送门: https://www.layui.com/doc/modules/layedit.html
7. 在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;
			}
		};

8. 这里介绍一个node的自启动/热更新库supervisor，传送门

9. 最后直接运行supervisor ./bin/www，run项目，默认端口3000，我这里改为3001，所以，直接在浏览器访问http://localhost:3001/layedit

10. 最后看一下效果图