本文分享給需要在node服務(wù)端的項目中使用富文本編輯器的小白，站在金字塔頂端的大佬輕噴
概要：
服務(wù)端使用的express框架
前端使用vue-cli搭建
開發(fā)后臺編輯功能需求一個富文本編輯器泰偿，首先想到的當然是爛大街的“百度ueditor”熄守，然而不幸的的是ueditor木有nodejs版本。網(wǎng)上找了修改配置等N種方法耗跛，由于作者“PJ”用智商換取了顏值裕照，所以都沒有成功。于是放棄另求其他編輯器调塌，找到了一個輕量級的編輯器——wangeditor晋南，風(fēng)格簡約清新，使用方便羔砾。

下面我們開始集成步驟：
一负间、前端配置：
這里默認你已經(jīng)使用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 : "" //內(nèi)容
            }
        },
        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' , //設(shè)置上傳圖片文件的時候态秧，后臺接受的文件名董虱，files.myFileName;
                　　　　　　　　　　　　withCredentials : true , //跨域上傳中如果需要傳遞 cookie 需設(shè)置 withCredentials
                　　　　　　　　　　　　uploadImgTimeout : 3000 , //自定義 timeout 時間，這里是設(shè)置的3秒
                　　　　　　　　　　　　uploadImgServer : 'http://10.55.4.74:3000/ueditor/wangeditor/upload' , //上傳到后臺的接口
            　　　　　　　　};
            　　　　　　　/*editor.customConfig.uploadImgParams = {//如果要自定義傳一些參數(shù)申鱼，就在這里愤诱；
                　　　　　　　　// 如果版本 <=v3.1.0 ，屬性值會自動進行 encode 捐友，此處無需 encode
                　　　　　　　　// 如果版本 >=v3.1.1 转锈，屬性值不會自動 encode ，如有需要自己手動 encode
                　　　　　　　　img_name:_this.img_name,
                　　　　　　　　token: 'abcdef12345'
            　　　　　　};*/
            this.toListenUp(editor);//監(jiān)聽上傳的各個階段
            editor.create();
        },
        methods:{
            toListenUp:function(editor){ //監(jiān)聽上傳圖片的幾個階段楚殿，和做相應(yīng)的處理
                var _this = this;
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                        // 圖片上傳之前觸發(fā)
                        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象竿痰，files 是選擇的圖片文件
                        
                        // 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
                        // return {
                        //     prevent: true,
                        //     msg: '放棄上傳'
                        // }
                    },
                    success: function (xhr, editor, result) {
                        // 圖片上傳并返回結(jié)果脆粥，圖片插入成功之后觸發(fā)
                        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象影涉，result 是服務(wù)器端返回的結(jié)果
                    },
                    fail: function (xhr, editor, result) {
                        // 圖片上傳并返回結(jié)果变隔，但圖片插入錯誤時觸發(fā)
                        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象蟹倾，result 是服務(wù)器端返回的結(jié)果
                    },
                    error: function (xhr, editor) {
                        // 圖片上傳出錯時觸發(fā)
                        // xhr 是 XMLHttpRequst 對象匣缘，editor 是編輯器對象
                    },
                    timeout: function (xhr, editor) {
                        // 圖片上傳超時時觸發(fā)
                        // xhr 是 XMLHttpRequst 對象猖闪，editor 是編輯器對象
                    },
                
                    // 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
                    // （但是肌厨，服務(wù)器端返回的必須是一個 JSON 格式字符串Ｅ嗷拧！柑爸！否則會報錯）
                    customInsert: function (insertImg, result, editor) {
                        // 圖片上傳并返回結(jié)果吵护，自定義插入圖片的事件（而不是編輯器自動插入圖片！１眵ⅰＯ诙）
                        // insertImg 是插入圖片的函數(shù)，editor 是編輯器對象譬圣，result 是服務(wù)器端返回的結(jié)果// 舉例：假如上傳圖片成功后瓮恭，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
                        var url = result.data[0]  厘熟； //獲取后臺返回的圖片路徑
                        insertImg(url) 屯蹦；//把圖片路徑展示在編輯器里面
                        // result 必須是一個 JSON 格式字符串！６⑵颇玷！否則報錯
                    }
                    }
                }
            }
        
    })
</script>
    
<style>
    
</style>

二、服務(wù)端配置
這里默認你已經(jīng)使用express搭建了服務(wù)端
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();
    //設(shè)置文件上傳存放地址（需要先把這個文件夾，在項目中建好）
    form.uploadDir = "./dist/uploads";
    //執(zhí)行里面的回調(diào)函數(shù)的時候竭宰，表單已經(jīng)全部接收完畢了空郊。
    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"); //把靜態(tài)資源路徑替換為網(wǎng)絡(luò)資源路徑
                res.send({errno:0,data:[mypath]}) //返回圖片路徑廓旬，讓前端展示
            });
    });
})



module.exports = router;   //暴露接口

express默認的靜態(tài)資源路徑是public哼审，因為我把vue-cli里build出來的dist文件夾直接復(fù)制進去了，所以進行了修改孕豹。具體路徑配置需要各位根據(jù)自己express設(shè)置的靜態(tài)資源路徑修改涩盾。

2、在主app.js中励背，設(shè)置路由春霍，讓前臺訪問到，如下：

var ueditor = require('./routes/ueditor');

app.use("/ueditor",ueditor)叶眉；

三址儒、最后生成效果如下圖：

圖片借的別人的