在nodejs中使用富文本编辑器UEditor

最近开发过程中遇到要某个商品添加描述的字段。由于我们后台使用的是nodejs开发。在网上找到了一个第三方的插件UEditor

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

官方网站:http://ueditor.baidu.com/website/ 

使用UEditor(nodejs)

UEditor 官方支持的版本有PHP JSP ASP.NET.

然而有大神netpi在github上贡献了开源版本的nodejs版UEditor.

URL: https://github.com/netpi/ueditor


使用方法:

1.安装ueditor模块 


npm install ueditor --save


2.在自己的nodejs程序中添加ueditor配置

var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(bodyParser.json());

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

        var img_url = '/images/ueditor/';
        res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
    }
//  客户端发起图片列表请求
    else if (req.query.action === 'listimage'){
        var dir_url = '/images/ueditor/';
        res.ue_list(dir_url);  // 客户端会列出 dir_url 目录下的所有图片
    }
// 客户端发起其它请求
    else {

        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/ueditor.config.json')
    }})); 



3.下载ueditor

https://github.com/netpi/ueditor/tree/master/example/public/ueditor(这个地址是netpi给大家做的列子里面的内容,可以直接下载拿来用)

但是要注意里面的配置

官方的配置文档:http://fex.baidu.com/ueditor/#start-config



4.创建文件

一般需要引入三个文件:ueditor.config.js;ueditor.all.min.js;lang/zh-cn/zh-cn.js





    
    ueditor demo



    
    
    
    
    
    
    
    





这个时候打开你的浏览器看上面那个网页,你就可以看到富文本编辑器啦!


遇到的问题:

我在程序中吧UEditor放到一个模态框里面,但是运行之后的UEditor字体颜色无法选择,还有字体无法选择,最后调试了下发现是UEditor 的css和bootstrap的css有冲突,原因是#edui_fixedlayer的z-index出现了问题,调小点就可以










你可能感兴趣的:(nodejs)