nodeJS部署ueditor富文本編輯器

 在作一個私人項目的時候須要用到在線富文本編輯器，多方尋覓後選定百度的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')); });

 效果以下：