用node搭建富文本编辑器ueditor服务端环境

用node搭建ueditor环境

最近手头的一个node项目，后台需使用富文本编辑器，综合考虑后选取ueditor，功能强大，关键是开源，下面开始分享一下部署流程。

---

1、安装ueditor-1.2.1

前提：node、mongodb、express环境以及正常搭建，特别说明node ueditor-1.2.1版本与express-formidable的上传机制有冲突，这个坑，勿踩。
安装命令：node install node-ueditor -save
安装完后node_modules目录下应该会出现相关资源包，如下：

目录说明详见官方文档

package.json文件中的dependencies会有

将静态资源拷贝到public目录下，如下图

资源这块妥了，下面来配置~~

2、程序入口，配置

参考文件\ueditor\example\app.js，把需要的配置代码写入程序启动的入口文件中。

var express = require('express');//加载express，必须var ejs = require('ejs');//解析模板var path = require('path');//资源路径，必须var ueditor = require('ueditor');//加载ueditor，必须var bodyParser = require('body-parser');//必须,解析客户端请求的body中的内容var app = express();app.use(bodyParser.urlencoded({    extended: true}));//返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型app.use(bodyParser.json());// view engine setup//使用模块app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {        //客户端上传文件设置        var imgDir = '/img/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.use('/ueditor', function (req, res) {        res.render('ueditor');    });//路由配置

3、前端页面使用

页面引入资源，确保ueditor静态资源已经拷贝到public目录下

//dom结构<textarea id="content" name="content"></textarea> // 加载配置  UE.getEditor('content', { initialFrameHeight: 250 }); 

4、运行

node index.js

工具栏按钮可根据需要进行配置，修改配置文件并添加相关资源，如下图