# yg_layedit
**Repository Path**: yango520/yg_layedit
## Basic Information
- **Project Name**: yg_layedit
- **Description**: express+multer实现layedit富文本编辑器图片上传，且新增了layedit查看源码功能
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-06-04
- **Last Updated**: 2022-08-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## express+multer实现layedit富文本编辑器图片上传
`新增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编辑
```javascript
// 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过来改了一下）
```javascript
// 初始化富文本编辑器
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(`
`);
}
//显示原代码
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`，[传送门](!https://blog.csdn.net/weixin_39644462/article/details/111731339)
#### 9. 最后直接运行`supervisor ./bin/www`，run项目，默认端口3000，我这里改为3001，所以，直接在浏览器访问`http://localhost:3001/layedit`
#### 10. 最后看一下效果图
