node使用UEditor富文本编辑器的方法实例

大部分编辑器的后台是基于java、PHP、asp等,很少有基于node.js的。今天就做一个基于node的

最近在做一个微信素材编辑器的小项目，使用到了UEditor编辑器，使用中出现了许多问题。

1.介绍

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

2.下载

下载地址：

选择开发版，因为我们使用node,所以随便下一个版本，这里下载1.4.3.3 jsp 版本

下载完成解压。

3.创建项目

使用express生成器生成一个项目,并安装好依赖模块

把刚刚压缩好的文件重命名为ueditor 放入ue-test/pubilc 中

修改index.ejs页面:

<%= title %>

然后启动项目，编辑器初始化成功！（注意引入文件路径的问题，如果初始化失败可以f12查看报错进行调试）

我们这里为什么要这样引入路径可以看这里（API）

4.后端配置

仅仅这样是不能进行上传的

我们需要要配置后端文件。

修改ueditor.config.js 文件

代码修改成这样，这里的url为请求的路径 // 服务器统一请求接口路径,serverUrl: URL + "ue"

接下来我们安装ueditor 模块

ueditor模块有一个示例，照着修改就好了

修改app.js：

//使用模块
app.use("/ueditor/ue",ueditor(path.join(__dirname,'public'),function (req,res,next) {
// ueditor 客户发起上传图片请求
if (req.query.action === 'uploadimage') {
var foo = req.ueditor;

var imgname = req.ueditor.filename; 

var img_url = '/images/ueditor/'; 
res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做 
res.setHeader('Content-Type','text/html');//IE8下载需要设置返回头尾text/html 不然json返回<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>会被直接下载打开

}
// 客户端发起图片列表请求
else if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
}
// 客户端发起其它请求
else {
// console.log('config.json')
res.setHeader('Content-Type','application/json');
res.redirect('/ueditor/jsp/config.json');
}
}));

修改完成重启一下服务就好了，