在做一個私人項目的時候需要用到在線富文本編輯器，多方尋覓后選定百度的ueditor，不過，竟然不支持nodeJS后台。
查！
找很多博客，很多教程，最后捋了一個自認為還算清晰的思路來。
以獨立小demo將知識點總結如下：
材料：
1.一張用來裝編輯器的html頁面
2.一個ueditor完整包（官方有php包、ASP包。Java包，隨便下載一個），注意，有的包可能目錄結構會是ueditor==>utf8==>.....，最好將utf8下面的內容直接復制到ueditor內
3.本地項目安裝ueditor模塊（此ueditor跟2里面說的不一樣，是一個依賴包）
第一步：創建一個項目（略）
第二步：
1.創建服務
2.使用使用body-parser模塊解析post請求（主要圖片和文件上傳）
3.設置入口頁面（默認加載ueditor.html）
這樣，就能看到ueditor界面了：
//引入express
var express=require('express'); //初始化APP
var app=express(); //監聽端口
app.listen(3333,function () { console.log('服務啟動'); }); //引入path模塊
var path=require('path'); //引入body-parser處理前台post請求
var bodyParser=require('body-parser'); //設置body-parser中間件
app.use(bodyParser.urlencoded({extended:true})); //解析body-parser
app.use(bodyParser.json()); //設置靜態目錄
app.use(express.static(path.join(__dirname,'../lib'))); //設置入口頁面
app.get('/',function (req,res) { res.sendFile(path.join(__dirname,'../ueditor.html')); });
界面如下：
但是會出現一個問題：此時因為ueditor包不支持node的原因，所以會報錯提示圖片上傳不可用，事實也如此
所以還需要更改一些原有的配置。
首先，更改ueditor文件夾中的ueditor.config.js文件，內部有一句設置根目錄的代碼：
將其更改為：
解釋一下：ueditor.config.js文件里這句代碼上方有說明，此處是設置編輯器資源文件根目錄（比如以localhost:8080/為參照路徑，ueditor在整個網站所處的位置），說白了這個地方就是設置ueditor文件包根目錄。我設置為“/ueditor/”的理由是，最開始我將http://localhost/lib設置成為了靜態文件夾目錄，而ueditor存放的位置為lib之下，所以我可以這樣設置。
其次，需要更改后台處理圖片和文件上傳的接口：
將借口修改為我自己的接口：getImg
到這里，config的配置算是修改完成了，接下來就是處理路由了
1.首先引入ueditor模塊
2.在中間件設置ueditor后台的請求處理
其中第2步：在node_modules目錄（npm安裝模塊的目錄）下找到ueditor模塊，在其中有一個app.js文件，將文件內app.use的中間件設置代碼拷貝到controller后台文件中即可，稍后做一些簡單的修改和設置。
前兩步代碼如下：
//引入express
var express=require('express'); //初始化APP
var app=express(); //監聽端口
app.listen(3333,function () { console.log('服務啟動'); }); //引入path模塊
var path=require('path'); //引入body-parser處理前台post請求
var bodyParser=require('body-parser'); //設置body-parser中間件
app.use(bodyParser.urlencoded({extended:true})); //解析body-parser
app.use(bodyParser.json()); //設置靜態目錄
app.use(express.static(path.join(__dirname,'../lib'))); /*針對ueditor的處理*/
//引入ueditor模塊
var ueditor=require('ueditor'); //設置中間件處理ueditor的后台請求
app.use("/ueditor/getImg", ueditor(path.join(__dirname, '../lib'), function (req, res, next) { //客戶端上傳文件設置
var imgDir = '/images/ueditor/'
var ActionType = req.query.action; if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') { var file_url = imgDir;//默認圖片上傳地址
/*其他上傳格式的地址*/
if (ActionType === 'uploadfile') { file_url = '/file/ueditor/'; //附件
} if (ActionType === 'uploadvideo') { file_url = '/video/ueditor/'; //視頻
} res.ue_up(file_url); //你只要輸入要保存的地址 。保存操作交給ueditor來做
res.setHeader('Content-Type', 'text/html'); } // 客戶端發起圖片列表請求
else if (req.query.action === 'listimage') { var dir_url = imgDir; res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
} // 客戶端發起其它請求
else { // console.log('config.json')
res.setHeader('Content-Type', 'application/json'); res.redirect('/ueditor/nodejs/config.json'); } })); //設置入口頁面
app.get('/',function (req,res) { res.sendFile(path.join(__dirname,'../ueditor.html')); });
說明一下：
1. 在設置ueditor中間件的時候，第一個參數【/ueditor/getImg】是指我們的圖片上傳請求路徑，之所以是這個值的原因是ueditor.config.js文件中，我們對接口的設置為：
// 服務器統一請求接口路徑
serverUrl: URL + "getImg"
而URL地址又是：
var URL = window.UEDITOR_HOME_URL || "/ueditor/";
那么，可以得知，serverURL完整體應該是：【http://localhost:8080/ueditor/getImg】
所以在當前設置的時候，我們的地址應該是【ueditor/getImg】
2.第二個參數【ueditor(path.join(__dirname, '../lib')】,是設置ueditor模塊需要初始化的ueditor所處的位置（將原本的ueditor改變為可以支持nodejs的新版本，個人理解），那么此處的【../lib】即為ueditor相對於當前controller文件的位置，再加上【__dirname】當前目錄路徑即可獲得准確的ueditor包的位置
3.回調中的images路徑設置：
var imgDir = '/images/ueditor/'
這個路徑定義了一個存放圖片的目錄，客戶端上傳的圖片會存放在這個目錄中，如果沒有則自動創建，依然是以靜態目錄為根目錄創建的（即相對lib），下面的文件、視頻也一樣。
4.最后，如果客戶端發送其他的請求，那么就將圖片文件上傳的config配置信息返回回去，而原本的config信息存放位置可能不是我想要的，最好的辦法是，在ueditor目錄下創建一個nodejs目錄，然后將php（后者ASP、Java）目錄中的config.json文件拷貝進去，這樣就可以了
做完這些，重啟服務，會發現ueditor的圖片上傳功能就可以使用了。
完整代碼如下：
/** * Created by admin on 2017/11/14. */
/* var app=require('express')(); var cookieParser=require('cookie-parser'); //引用express-session用來控制session var session=require('express-session'); //設置session中間件 app.use(session({ secret:'drhn ued', //與cookieParser中一致 resave:true, //(是否允許)當客戶端並行發送多個請求時，其中一個請求在另一個請求結束時對session進行修改覆蓋並保存。默認為true。但是(后續版本)有可能默認失效，所以最好手動添加。 saveUninitialized:true //初始化session時是否保存到存儲。默認為true， 但是(后續版本)有可能默認失效，所以最好手動添加。 })); app.listen('8181',function(){ console.log('服務啟動'); }); //設置cookie請求中間件 app.use(cookieParser('drhn ued')); //設置當請求為根目錄的時候操作cookie app.get('/',function(req,res){ // req.session.user={username:'謝某某'}; console.log(req.session); // 檢查session中的isVisit字段是否存在 //如果存在則自增一次，如果不存在為session設置isVisit字段，並初始化1 console.log(req.cookies); if(req.cookies.isVisit){ var num=parseInt(req.cookies.isVisit); num+=1; console.log(typeof num); res.cookie('isVisit',num); res.send('歡迎您第：'+num+'次訪問'); }else{ res.cookie('isVisit',1); res.send('歡迎第1次訪問'); } }); app.get('/user',function(req,res){ if(req.session.user){ res.send('歡迎你'+req.session.user.username); }else{ req.session.user={username:'謝某某'}; res.send('歡迎登錄'); } })*/
//引入express
var express=require('express'); //初始化APP
var app=express(); //監聽端口
app.listen(3333,function () { console.log('服務啟動'); }); //引入path模塊
var path=require('path'); //引入body-parser處理前台post請求
var bodyParser=require('body-parser'); //設置body-parser中間件
app.use(bodyParser.urlencoded({extended:true})); //解析body-parser
app.use(bodyParser.json()); //設置靜態目錄
app.use(express.static(path.join(__dirname,'../lib'))); /*針對ueditor的處理*/
//引入ueditor模塊
var ueditor=require('ueditor'); //設置中間件處理ueditor的后台請求
app.use("/ueditor/getImg", ueditor(path.join(__dirname, '../lib'), function (req, res, next) { //客戶端上傳文件設置
var imgDir = '/images/ueditor/'
var ActionType = req.query.action; if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') { var file_url = imgDir;//默認圖片上傳地址
/*其他上傳格式的地址*/
if (ActionType === 'uploadfile') { file_url = '/file/ueditor/'; //附件
} if (ActionType === 'uploadvideo') { file_url = '/video/ueditor/'; //視頻
} res.ue_up(file_url); //你只要輸入要保存的地址 。保存操作交給ueditor來做
res.setHeader('Content-Type', 'text/html'); } // 客戶端發起圖片列表請求
else if (req.query.action === 'listimage') { var dir_url = imgDir; res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
} // 客戶端發起其它請求
else { // console.log('config.json')
res.setHeader('Content-Type', 'application/json'); res.redirect('/ueditor/nodejs/config.json'); } })); //設置入口頁面
app.get('/',function (req,res) { res.sendFile(path.join(__dirname,'../ueditor.html')); });
效果如下：
