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

时间：2022-06-13 10:09:02

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



标签：

相关文章