本文分享给需要在node服务端的项目中使用富文本编辑器的小白，站在金字塔顶端的大佬轻喷
概要：
服务端使用的express框架
前端使用vue-cli搭建
开发后台编辑功能需求一个富文本编辑器，首先想到的当然是烂大街的“百度ueditor”，然而不幸的的是ueditor木有nodejs版本。网上找了修改配置等N种方法，由于作者“PJ”用智商换取了颜值，所以都没有成功。于是放弃另求其他编辑器，找到了一个轻量级的编辑器——wangeditor，风格简约清新，使用方便。
下面我们开始集成步骤：
一、前端配置：
这里默认你已经使用vue-cli搭建好了项目
1、安装编辑器依赖：
进入自己的前台项目，打开cmd控制台，输入 ：
npm install wangeditor --save
2、在组件中使用wangeditor
<template>
<div id="myWangEditor" ref="myWangEditor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
</template>
<script>
import wangEditor from 'wangeditor'; //引入刚npm安装的wangeditor插件
export default({
name:"MyWangEditor",
data(){
return {
editorContent : "" //内容
}
},
created(){
},
mounted(){
var _this = this;
var editor = new wangEditor(this.$refs.myWangEditor); //实例化wangeditor
editor.customConfig = {
onchange : (html) =>{this.editorContent = html;} ,
uploadImgMaxSize : 3 * 1024 * 1024 , // 将图片大小限制为 3M
uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
uploadFileName : 'myFileName' , //设置上传图片文件的时候，后台接受的文件名，files.myFileName;
withCredentials : true , //跨域上传中如果需要传递 cookie 需设置 withCredentials
uploadImgTimeout : 3000 , //自定义 timeout 时间，这里是设置的3秒
uploadImgServer : 'http://10.55.4.74:3000/ueditor/wangeditor/upload' , //上传到后台的接口
};
/*editor.customConfig.uploadImgParams = {//如果要自定义传一些参数，就在这里；
// 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
// 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
img_name:_this.img_name,
token: 'abcdef12345'
};*/
this.toListenUp(editor);//监听上传的各个阶段
editor.create();
},
methods:{
toListenUp:function(editor){ //监听上传图片的几个阶段，和做相应的处理
var _this = this;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.data[0] ； //获取后台返回的图片路径
insertImg(url) ；//把图片路径展示在编辑器里面
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
}
}
})
</script>
<style>
</style>
二、服务端配置
这里默认你已经使用express搭建了服务端
1、进入后台项目文件夹 routes 新建路由js文件 ueditor.js , 建立一个后台接受图片上传的接口，具体代码如下：
var express = require('express');
var router = express.Router();
var formidable = require('formidable'); //上传图片处理的插件
var fs = require("fs"); //文件模块
//wangeditor上传图片的地址
router.post("/wangeditor/upload",function(req,res,next){
var form = new formidable.IncomingForm();
//设置文件上传存放地址（需要先把这个文件夹，在项目中建好）
form.uploadDir = "./dist/uploads";
//执行里面的回调函数的时候，表单已经全部接收完毕了。
form.parse(req, function(err, fields, files) {
var oldpath = files.myFileName.path; //myFileName就是我们刚在前台模板里面配置的后台接受的名称；
var extname = files.myFileName.name; //因为formidable这个时候存在我们刚路径上的，只是一个path，还没有具体的扩展名，如：2.png这样的
//新的路径由组成：原父路径 + 拓展名
var newpath = "./dist/uploads/" + extname;
//改名
fs.rename(oldpath, newpath, function(err) { //把之前存的图片换成真的图片的完整路径
if(err) {
res.send({errno:1,data:[]});
};
var mypath = newpath.replace("./dist","http://localhost:3000"); //把静态资源路径替换为网络资源路径
res.send({errno:0,data:[mypath]}) //返回图片路径，让前端展示
});
});
})
module.exports = router; //暴露接口
express默认的静态资源路径是public，因为我把vue-cli里build出来的dist文件夹直接复制进去了，所以进行了修改。具体路径配置需要各位根据自己express设置的静态资源路径修改。
2、在主app.js中，设置路由，让前台访问到，如下：
var ueditor = require('./routes/ueditor');
app.use("/ueditor",ueditor)；
三、最后生成效果如下图：
图片借的别人的
