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

来源：互联网发布：大学生单片机自学视频编辑：程序博客网时间：2024/05/18 01:46

最近开发过程中遇到要某个商品添加描述的字段。由于我们后台使用的是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

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>ueditor demo</title></head><body>    <!-- 加载编辑器的容器 -->    <script id="container" name="content" type="text/plain">        这里写你的初始化内容    </script>    <!-- 配置文件 -->    <script type="text/javascript" src="ueditor.config.js"></script>    <!-- 编辑器源码文件 -->    <script type="text/javascript" src="ueditor.all.js"></script>    <!-- 实例化编辑器 -->    <script type="text/javascript">        var ue = UE.getEditor('container');    </script></body></html>

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

遇到的问题：

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

<style>    #edui_fixedlayer{        z-index: 2000 !important;    }</style>

0 0