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的圖片上傳功能就可使用了。

完整代碼以下：

//引入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'));
});

效果以下：