大佬教程收集整理的这篇文章主要介绍了NODEJS部署UEDITOR富文本编辑器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在做一个私人项目的时候需要用到在线富文本编辑器,多方寻觅后选定百度的ueditor,不过,竟然不支持nodeJS后台。
查!
以独立小demo将知识点总结如下:
材料:
1.一张用来装编辑器的html页面
2.一个ueditor完整包(官方有PHP包、ASP包。Java包,随便下载一个),注意,有的包可能目录结构会是ueditor==>utf8==>.....,最好将utf8下面的内容直接复制到ueditor内
3.本地项目安装ueditor模块(此ueditor跟2里面说的不一样,是一个依赖包)
第一步:创建一个项目(略)
第二步:
1.创建服务
2.使用使用body-parser模块解析post请求(主要图片和文件上传)
这样,就能看到ueditor界面了:
//引入express var express=require('express'); //初始化APP var app=express(); //监听端口 app.listen(3333,function () { console.log('服务启动'); }); //引入path模块 var path=require('path'); //引入body-parser处理前台post请求 var bodyParser=require('body-parser'); //设置body-parser中间件 app.use(bodyParser.urlencoded({extended:truE})); //解析body-parser app.use(bodyParser.json()); //设置静态目录 app.use(express.static(path.join(__dirname,'../lib'))); //设置入口页面 app.get('/',function (req,res) { res.sendFile(path.join(__dirname,'../ueditor.html')); });
界面如下:
但是会出现一个问题:此时因为ueditor包不支持node的原因,所以会报错提示图片上传不可用,事实也如此
所以还需要更改一些原有的配置。
首先,更改ueditor文件夹中的ueditor.config.js文件,内部有一句设置根目录的代码:
@H_772_38@@H_772_38@@H_607_64@
将其更改为:
解释一下:ueditor.config.js文件里这句代码上方有说明,此处是设置编辑器资源文件根目录(比如以localhost:8080/为参照路径,ueditor在整个网站所处的位置),说白了这个地方就是设置ueditor文件包根目录。我设置为“/ueditor/”的理由是,最开始我将 http://localhost/lib 设置成为了静态文件夹目录,而ueditor存放的位置为lib之下,@R_949_9447@这样设置。
将借口修改为我自己的接口:getImg
到这里,config的配置算是修改完成了,接下来就是处理路由了
1.首先引入ueditor模块
2.在中间件设置ueditor后台的请求处理
其中第2步:在Node_modules目录(npm安装模块的目录)下找到ueditor模块,在其中有一个app.js文件,将文件内app.use的中间件设置代码拷贝到controller后台文件中即可,稍后做一些简单的修改和设置。
前两步代码如下:
//引入express var express=require('express'); //初始化APP var app=express(); //监听端口 app.listen(3333,'../lib'))); /*针对ueditor的处理*/ //引入ueditor模块 var ueditor=require('ueditor'); //设置中间件处理ueditor的后台请求 app.use("/ueditor/getImg",ueditor(path.join(__dirname,'../lib'),res,next) { //客户端上传文件设置 var imgDir = '/images/ueditor/' var ActionType = req.query.action; if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') { var file_url = imgDir;//默认图片上传地址 /*其他上传格式的地址*/ if (ActionType === 'uploadfile') { file_url = '/file/ueditor/'; //附件 } if (ActionType === 'uploadvideo') { file_url = '/video/ueditor/'; //视频 } reS.Ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做 res.setHeader('Content-Type','text/html'); } // 客户端发起图片列表请求 else if (req.query.action === 'listimage') { var dir_url = imgDir; reS.Ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片 } // 客户端发起其它请求 else { // console.log('config.json') res.setHeader('Content-Type','application/json'); res.redirect('/ueditor/nodejs/config.json'); } })); //设置入口页面 app.get('/','../ueditor.html')); });
说明一下:
// 服务器统一请求接口路径 serverUrl: URL + "getImg"
而URL地址又是:
var URL = window.UEDITOR_HOME_URL || "/ueditor/";
那么,可以得知,serverURL完整体应该是:【http://localhost:8080/ueditor/getImg】
所以在当前设置的时候,我们的地址应该是【ueditor/getImg】
2.第二个参数【ueditor(path.join(__dirname,'../lib')】,是设置ueditor模块需要初始化的ueditor所处的位置(将原本的ueditor改变为可以支持nodejs的新版本,个人理解),那么此处的【../lib】即为ueditor相对于当前controller文件的位置,再加上【__dirname】当前目录路径即可获得准确的ueditor包的位置
3.回调中的images路径设置:
var imgDir = '/images/ueditor/'
这个路径定义了一个存放图片的目录,客户端上传的图片会存放在这个目录中,如果没有则自动创建,依然是以静态目录为根目录创建的(即相对lib),下面的文件、视频也一样。
4.最后,如果客户端发送其他的请求,那么就将图片文件上传的config配置信息返回回去,而原本的config信息存放位置可能不是我想要的,最好的办法是,在ueditor目录下创建一个nodejs目录,然后将PHP(后者ASP、Java)目录中的config.json文件拷贝进去,这样就可以了
做完这些,重启服务,会发现ueditor的图片上传功能就可以使用了。
完整代码如下:
//引入express var express=require('express'); //初始化APP var app=express(); //监听端口 app.listen(3333,'../ueditor.html')); });
效果如下:
以上是大佬教程为你收集整理的NODEJS部署UEDITOR富文本编辑器全部内容,希望文章能够帮你解决NODEJS部署UEDITOR富文本编辑器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。