Nodejs-express+vue-cli+wangedito

本文分享给需要在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)；

三、最后生成效果如下图：