做私人项目需要用到在线富文本编辑器。经过多方搜索，我选择了百度的ueditor。但是不支持nodeJS后台。查看！找了很多博客，很多教程，最后想出了一个自认为还算清晰的思路。知识点用一个独立的小demo总结如下：资料： 1。用于安装编辑器的html页面 2。ueditor完整包（官方包包括php包和ASP包。java包，下载一个即可），注意有的包可能是ueditor==>utf8==>...的目录结构，最好直接把utf8下面的内容复制到ueditor中 3。Local项目安装ueditor模块（这个ueditor和2中说的不一样，是一个依赖包）Step1：创建工程（略）Step2： 1.创建一个服务 2。使用body-parser模块解析post请求（主要是图片和文件上传） 3.设置入口页面（默认加载ueditor.html），这样就可以看到ueditor界面了：//引入expressvarexpress=require('express');//初始化APPvarapp=express();//监听端口app.listen(3333,function(){console.log('servicestartup');});//引入路径模块varpath=require('path');//引入body-parser处理前端post请求varbodyParser=require('body-parser');//设置body-parser中间件app.use(bodyParser.urlencoded({extended:true}));//解析body-parserapp.use(bodyParser.json());//设置静态目录app.use(express.static(path.join(__dirname,'../lib')));//设置入口页面应用程序。get('/',function(req,res){res.sendFile(path.join(__dirname,'../ueditor.html'));});界面如下：但是会出现一个问题：这时候因为ueditor包不支持node的原因，所以会报错提示无法上传图片，事实是一样的，因此需要更改一些原始配置。首先，更改ueditor文件夹中的ueditor.config.js文件。里面有设置根目录的代码：改成：说明：在ueditor.config.js文件中这段代码上面有解释，这里是设置编辑器资源文件的根目录（比如withlocalhost:8080/作为参考路径，ueditor在整个网站的位置），说白了，这个地方就是设置ueditor文件包的根目录。之所以设置为“/ueditor/”是因为一开始我把http://localhost/lib设置为静态文件夹目录，而ueditor存放在lib下，所以可以这样设置。其次，需要更改后台处理图片和文件上传的接口：这里借口改成我自己的接口：getImg，修改config的配置，下一步就是处理路由 1。先介绍ueditor模块 2。在中间件中设置ueditor后台请求处理步骤2：在node_modules目录下（npm安装模块的目录）找到ueditor模块，里面有个app.js文件，中间的app.use在file只需将组件设置代码复制到controller后台文件中，后面做一些简单的修改和设置即可。 前两步代码如下：//引入expressvarexpress=require('express');//初始化APPvarapp=express();//监听端口app.listen(3333,function(){console.log('Servicestart');});//引入path模块varpath=require('path');//引入body-parser处理前端post请求varbodyParser=require('body-parser');//设置body-parser中间件app.use(bodyParser.urlencoded({extended:true}));//解析body-parserapp.use(bodyParser.json());//设置静态目录app.use(express.static(path.join(__dirname,'../lib')));/*对ueditor的处理*///导入ueditor模块varueditor=require('ueditor');//设置中间件为处理ueditor的后台请求app。use("/ueditor/getImg",ueditor(path.join(__dirname,'../lib'),function(req,res,next){//客户端上传文件设置varimgDir='/images/ueditor/'varActionType=req.query.action;if(ActionType==='uploadimage'||ActionType==='uploadfile'||ActionType==='uploadvideo'){varfile_url=imgDir;//默认图片上传地址/*其他上传格式的地址*/if(ActionType==='uploadfile'){file_url='/file/ueditor/';//attachment}if(ActionType==='uploadvideo'){file_url='/video/ueditor/';//视频}res.ue_up(file_url);//你只需要输入地址就可以保存保存操作交给ueditorforres.setHeader('Content-Type','text/html');}//客户端发起图片列表请求elseif(req.query.action==='listimage'){vardir_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('/',function(req,res){res.sendFile(path.join(__dirname,'../ueditor.html'));});说明：在设置ueditor中间件的时候，第一个参数[/ueditor/getImg]是指我们的图片上传请求路径。这个值的原因是在ueditor.config.js文件中，我们设置接口为：//server统一请求接口路径serverUrl:URL+"getImg"URL地址为：varURL=window.UEDITOR_HOME_URL||“/编辑器/”；那么，我们可以知道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路径设置:varimgDir='/images/ueditor/'这个路径定义了一个存放图片的目录,客户端的上传的图片会存放在这个目录下。如果没有，它会自动创建。还是以static目录为根目录（即相对于lib）创建的，后面的文件和视频也是一样的。4.最后，如果客户端发送了其他请求，则返回镜像文件上传的config配置信息，原来的config信息存放位置可能不是我想要的。最好的办法是在ueditor目录下新建一个nodejs目录，然后在php（后面的ASP，Java）目录下把config.json文件拷贝进去，这样就完成这些了，重启服务，你会发现可以使用ueditor的图片上传功能。完整代码如下：//引入expressvarexpress=require('express');//初始化APPvarapp=express();//监听端口app.listen(3333,function(){console.log('Servicestartup');});//引入路径模块varpath=require('path');//引入body-parser处理前端post请求varbodyParser=require('body-parser');//设置body-parser中间件app.use(bodyParser.urlencoded({extended:true}));//解析body-parserapp.use(bodyParser.json());//设置静态目录app.use(express.static(path.join(__dirname,'../lib')));/*对ueditor的处理*///引入ueditor模块varueditor=require('ueditor');//设置中间件处理后台requestofueditorapp.use("/ueditor/getImg",ueditor(path.join(__dirname,'../lib'),function(req,res,next){//客户端上传文件设置varimgDir='/images/ueditor/'varActionType=req.query.action;if(ActionType==='uploadimage'||ActionType==='uploadfile'||ActionType==='uploadvideo'){varfile_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');}//客户端发起图片列表请求elseif(req.query.action==='listimage'){vardir_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('/',function(req,res){res.sendFile(path.join(__dirname,'../ueditor.html'));});效果如下：
