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

效果以下：