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

时间:2022-12-25 19:03:41

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