nodejs express制作后台引入富文本编辑器
来源:互联网 发布:linux中vi显示行号 编辑:程序博客网 时间:2024/06/14 00:13
需求
由于ueditor官方没有nodejs后台的版本,所以只有通过别的大神开发的版本使用了。故写个教程,留作以后备用。
下载ueditor
地址:http://ueditor.baidu.com/website/download.html
由于没有nodejs版本的,所以下载php版本的,通过php版本的进行修改。
博主当前下载的版本是:1.4.3.3
引入ueditor
先在express的public文件夹内创建一个ueditor目录,用于存放所有的解压出来的代码,由于本人懒,没有删除里面没有的文件,请大家自行删除。然后在模板页面中引入三个文件,分别是:
<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 id="editor" type="text/plain" style="width:100%;height:500px;"></script>
最后在js里面实例化:
var ue = UE.getEditor('editor');
打开页面,查看效果。
但是你打开控制台,会发现,给你提示
配置nodejs ueditor相关
上面的报错是因为我们没有配置ueditor的nodejs相关,接着我们就处理nodejs的问题。
我们在基友网站上面找到了一个叫netpi大神的解决方案,github地址:https://github.com/netpi/ueditor
制作了nodejs端的服务配置。具体操作:
首先安装模块
npm install ueditor --save
安装成功以后,按照大神的案例配置,在express里面的app.js里面配置
var bodyParser = require('body-parser')var ueditor = require("ueditor")app.use(bodyParser.urlencoded({ extended: true}))app.use(bodyParser.json());// /ueditor 入口地址配置 https://github.com/netpi/ueditor/blob/master/example/public/ueditor/ueditor.config.js// 官方例子是这样的 serverUrl: URL + "php/controller.php"// 我们要把它改成 serverUrl: URL + 'ue'app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) { // ueditor 客户发起上传图片请求 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 // 下面填写你要把图片保存到的路径 ( 以 path.join(__dirname, 'public') 作为根路径) var img_url = 'yourpath'; res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做 } // 客户端发起图片列表请求 else if (req.query.action === 'listimage'){ var dir_url = 'your img_dir'; // 要展示给客户端的文件夹路径 res.ue_list(dir_url) // 客户端会列出 dir_url 目录下的所有图片 } // 客户端发起其它请求 else { res.setHeader('Content-Type', 'application/json'); // 这里填写 ueditor.config.json 这个文件的路径 res.redirect('/ueditor/ueditor.config.json')}}));
将上面的图片存储的文件夹路径自行修改,根目录是public文件夹。
修改ueditor的配置
最后找到public/ueditor/ueditor.config.js文件,将里面的URL + “php/controller.php”修改成为URL + ‘ue’
而ueditor.config.json这个文件的配置,在php文件里面,从里面拿出来修改下名字将文件放在public/ueditor/即可
阅读全文
0 0
- nodejs express制作后台引入富文本编辑器
- 后台引入富文本编辑器
- 富文本编辑器的制作
- 百度富文本编辑器引入问题
- 11. Django 引入富文本编辑器KindEditor
- Django后台整合TinyMCE富文本编辑器
- 网站后台添加富文本编辑器
- 网站后台添加富文本编辑器
- Angular2 使用总结以及 引入tinymce富文本编辑器
- 在nodejs中使用富文本编辑器UEditor
- 富文本编辑器的应用,以及后台处理
- kindEditer富文本编辑器从前端到后台完整经验
- Django在admin后台集成TinyMCE富文本编辑器
- iframe制作富文本编辑器各个浏览器换行的问题
- 富文本编辑器
- 富文本编辑器
- Web富文本编辑器
- Flex富文本编辑器
- 八百里加急$数据结构追加2组织权限设计
- sha1加密算法
- mkdocs
- 使用md-http快速搭建博客
- thinkphp5.0框架中图标显示问题
- nodejs express制作后台引入富文本编辑器
- (四)Spring Boot自动配置介绍,以及日志配置
- Java后端WebSocket的Tomcat实现
- 敏捷开发:IT人应该做的创新与变
- 二维数组矩阵转置
- ansible基本使用
- tar压缩解压缩命令详解
- Java实现三种(顺序,链式,循环)队列
- The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar