express+multer实现layedit富文本编辑器图片上传
新增layedit查看源码功能
源码地址:https://gitee.com/yango520/yg_layedit
- 首先使用express创建一个项目server
express server
- 然后初始化项目
//进入server目录
cd server
//初始化项目
cnpm install
- 安装所需要的依赖库
//multer用来处理文件上传
cnpm install multer --save
//express-art-template和art-template是html渲染模版引擎
cnpm install --save express-art-template art-template
- 打开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'));
- 下载layui,layui官网传送门: https://www.layui.com
- layedit文档传送门: https://www.layui.com/doc/modules/layedit.html
- 在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;
}
};
-
这里介绍一个node的自启动/热更新库
supervisor
,传送门 -
最后直接运行
supervisor ./bin/www
,run项目,默认端口3000,我这里改为3001,所以,直接在浏览器访问http://localhost:3001/layedit
-
最后看一下效果图