本來是想用百度的ueditor編輯器來達到想要的功能的，但在使用中，感覺前后台分離上，需要引入的東西過多，不輕量；然后就去嘗試用wangeditor(這個名字聽着感覺有點太隨意的感覺。。。。但功能上還是很嚴謹，很輕量的)；
官網：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
具體使用方法如下：
一：我使用的開發環境
后台是用的express生成器，生成的后台node環境；
前台是用的vue-cli的腳手架直接搭建的項目；
二：前台的配置
2.1 進入自己的前台項目，打開cmd控制台，輸入 ： npm install wangeditor --save ;就完成了安裝插件到自己項目中；還是很easy的；
2.2 進入src - components 新建wangEditor.vue模板文件，文件的具體內容和解釋如下：
<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>
2.3 前台配置基本簡潔的配置就是這些，還有些參數配置，可以去看官網；
三：后台node的配置
3.1 進入后台項目文件夾 routes 新建路由js文件 ueditor.js , 建立一個后台接受圖片上傳的接口，具體代碼如下：
var express = require('express');
var router = express.Router();
var formidable = require('formidable'); //上傳圖片處理的插件
var fs = require("fs"); //文件模塊
var context = require('../public/javascripts/context'); //環境的一些配置
//wangeditor上傳圖片的地址
router.post("/wangeditor/upload",function(req,res,next){
var form = new formidable.IncomingForm();
//設置文件上傳存放地址（需要先把這個文件夾，在項目中建好）
form.uploadDir = "./public/images/wang";
//執行里面的回調函數的時候，表單已經全部接收完畢了。
form.parse(req, function(err, fields, files) {
var oldpath = files.myFileName.path; //myFileName就是我們剛在前台模板里面配置的后台接受的名稱；
var extname = files.myFileName.name; //因為formidable這個時候存在我們剛路徑上的，只是一個path，還沒有具體的擴展名，如：2.png這樣的
//新的路徑由組成：原父路徑 + 拓展名
var newpath = "./public/images/wang/" + extname;
//改名
fs.rename(oldpath, newpath, function(err) { //把之前存的圖片換成真的圖片的完整路徑
if(err) {
res.send({errno:1,data:[]});
};
var mypath = newpath.replace("./public","http://" + context.ip +":3000"); //context.ip是我自己設置的后台的ip名，根據環境，可以是localhost,也可以是電腦ip
res.send({errno:0,data:[mypath]}) //返回圖片路徑，讓前端展示
});
});
})
module.exports = router; //暴露接口
3.2 在主app.js中，設置路由，讓前台訪問到，如下：
...........別的原有的配置，忽略。。。。
//新加：
var ueditor = require('./routes/ueditor');
app.use("/ueditor",ueditor)；
四：最后的效果就如下圖：
