【node】使用node 配置 ueditor富文本编辑器

准备

1、下载UEditor

地址： https://ueditor.baidu.com/website/download.html

版本：1.4.3.3 PHP 版本

文档：http://fex.baidu.com/ueditor/

2、安装ueditor模块

npm install uetidor --save

配置ueditor

/*引入模块*/
var express = require('express');
var path = require('path');//路径模块
var body = require('body-parser');//post传参解析模块
var request = require("request");//请求模块
require('body-parser-xml')(body);//解析XML模块
var app = express();//实例化对象
/*引入数据库*/
var model = require('./model/mongodb');//引入数据库文件
/*客户端传参解密*/
app.use(body.json());
app.use(body.urlencoded({extended:true}));
app.use(body.xml({
    limit: '1MB',
    xmlParseOptions: {
        normalize: true,
        normalizeTags: true,
        explicitArray: false
    }
}));

var ueditor = require("ueditor");

app.use("/ueditor/ue", ueditor(path.join(__dirname, 'www'), function(req, res, next) {
    if(req.query.action === 'uploadimage'){
        var foo = req.ueditor;
        console.log(foo.filename); // exp.png
        console.log(foo.encoding); // 7bit
        console.log(foo.mimetype); // image/png
        var img_url = 'upload';//图片保存路径
        res.ue_up(img_url);
    }
    else if (req.query.action === 'listimage'){
        var dir_url = 'upload';//图片读取路径
        res.ue_list(dir_url)
    }
    else {
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/ueditor.config.json')//ueditor.config.json路径
    }}));

app.post("/api/ueditor",function(req,res){//富文本编辑器提交请求接口
    console.log(req.body);
});
/*静态页面*/
app.use(express.static(path.join(__dirname,'www')));
/*监听
* IP：127.0.0.1
* 端口:80
* */
var appPort = 80;//定义端口号
app.listen(appPort,function(err){
    if(err){
        console.log("服务器启动失败");
        throw err;
    }
    console.log("服务器启动成功，端口号为:"+appPort)
});

修改UEditor文件配置

1、修改“/ueditor/ueditor.config.js”文件，将URL + “php/controller.php”修改成为URL + ‘ue’。
2、将“/php/ueditor.config.json”文件移到“/ueditor/”路径下 。

前端配置

<div style="width:980px; margin: 0 auto">
    <form action="/api/ueditor" method="post" >
        <div id="editor" type="text/plain" style="width:100%;height:500px;"></div>
        <button type="submit">提交</button>
    </form>
</div>


<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<script>
    var ue = UE.getEditor('editor',{
       
    });
</script>

配置成功