首页 > > 网页制作 > Javascript >

nodeJS部署ueditor富文本编辑器

2018-06-24 00:49:17来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

 在做一个私人项目的时候需要用到在线富文本编辑器，多方寻觅后选定百度的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'));
});

 效果如下：

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：如何监听Element组件<el-input>标签的回车事件

下一篇：ES之各种运算符，for、while、do while 、switch case循环

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签