nodeJS部署ueditor富文本编辑器

作者:分分快三计划

将其变动为:

图片 1图片 2

var URL = window.UEDITOR_HOME_URL || "/ueditor/";
window.UEDITOR_HOME_URL = top.ctx   '/ueditor/'

证澳优下:

  然后:

将借口修正为自己本人的接口:getImg

  在ueditor文件夹下新建了nodejs文件夹,在nodejs下新建二个config.json文件。 源码如下

3.回调中的images路线设置:

  自家改革ueditor.config.js中了home路线(那些路子遵照自个儿安装的静态财富文件来填写,参照他事他说加以调查上面home路线的注解卡塔尔 

图片 3

 

解释一下:ueditor.config.js文件里那句代码上方有认证,此处是安装编辑器财富文件根目录(比方以localhost:8080/为参谋路线,ueditor在全部网址所处的岗位卡塔 尔(英语:State of Qatar),说白了那么些地点正是设置ueditor文件包根目录。笔者设置为“/ueditor/”的理由是,最早先小编将

  其次作者更正了服务器统风姿洒脱央求路线 

  3.本地品种安装ueditor模块(此ueditor跟2里面说的不平等,是一个依附包卡塔尔国

  正是管理top.ctx '/ueditor/ueditor'央求的后台代码了。笔者的后台运维主程序是server.js(就好像c的main.c一样)。所以作者就在server.js里面写管理代码了。 
  想要使用ueditor,必要注重一下多少个nodejs包:express/body-parser/ueditor ,使用"npm install 包名 --save"安装就能够 
  图片 4
  后台代码如下(当然,如若原先的代码已经包涵了的包和代码就无须再另行了卡塔 尔(阿拉伯语:قطر‎ 

以单身小demo将知识点总括如下:

  用chrome浏览器查看恳求,结果为

图片 5

  图片 6

  2.两个ueditor完整包(官方有php包、ASP包。Java包,随意下载八个卡塔尔国,注意,有的包或者目录结构会是ueditor==>utf8==>.....,最佳将utf8底下的内容一贯复制到ueditor内

window.UEDITOR_HOME_URL = top.ctx   '/static/ueditor/'; 

图片 7

var express = require('express'); 
var path = require('path');
var app = express();
var ueditor = require("ueditor");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'static'), function(req, res, next) {
    // ueditor 客户发起上传图片请求
    if (req.query.action === 'uploadimage') {
        var foo = req.ueditor;
        var imgname = req.ueditor.filename;
        var img_url = 'ueditor/';
        //你只要输入要保存的地址 。保存操作交给ueditor来做
        res.ue_up(img_url); 
    }
    //  客户端发起图片列表请求
    else if (req.query.action === 'listimage') {
        var dir_url = 'ueditor/';
        // 客户端会列出 dir_url 目录下的所有图片
        res.ue_list(dir_url); 
    }
    // 客户端发起其它请求
    else {
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
})); 

  前两步代码如下:

*  *ok,去运作server.js跑起来,就能够运用了 

总体代码如下:

 

而是会不由自主四个主题素材:此时因为ueditor包不匡助node的原故,所以会报错提醒图片上传不可用,事实也如此

  

这几个渠道定义了三个存放图片的目录,客商端上传的图片会寄放在这里个目录中,若无则自动创立,如故是以静态目录为根目录创制的(即相对lib卡塔 尔(英语:State of Qatar),上面包车型大巴文书、录制也同等。

View Code

 

  图片 8

//引入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')));
/*针对ueditor的处理*/
//引入ueditor模块
var ueditor=require('ueditor');
//设置中间件处理ueditor的后台请求
app.use("/ueditor/getImg", ueditor(path.join(__dirname, '../lib'), function (req, 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('/',function (req,res) {
    res.sendFile(path.join(__dirname,'../ueditor.html'));
});

  本身的解决方案就是将ueditor模块下的index.js第77行改为

/**
 * Created by admin on 2017/11/14.
 */
/*
var app=require('express')();
var cookieParser=require('cookie-parser');
//引用express-session用来控制session
var session=require('express-session');
//设置session中间件
app.use(session({
    secret:'drhn ued',   //与cookieParser中一致
    resave:true,        //(是否允许)当客户端并行发送多个请求时,其中一个请求在另一个请求结束时对session进行修改覆盖并保存。默认为true。但是(后续版本)有可能默认失效,所以最好手动添加。
    saveUninitialized:true  //初始化session时是否保存到存储。默认为true, 但是(后续版本)有可能默认失效,所以最好手动添加。
}));
app.listen('8181',function(){
    console.log('服务启动');
});
//设置cookie请求中间件
app.use(cookieParser('drhn ued'));
//设置当请求为根目录的时候操作cookie
app.get('/',function(req,res){
    // req.session.user={username:'谢某某'};
    console.log(req.session);
    // 检查session中的isVisit字段是否存在
    //如果存在则自增一次,如果不存在为session设置isVisit字段,并初始化1
    console.log(req.cookies);
    if(req.cookies.isVisit){
        var num=parseInt(req.cookies.isVisit);
        num =1;
        console.log(typeof num);
        res.cookie('isVisit',num);
        res.send('欢迎您第:' num '次访问');
    }else{
        res.cookie('isVisit',1);
        res.send('欢迎第1次访问');
    }
});
app.get('/user',function(req,res){
    if(req.session.user){
        res.send('欢迎你' req.session.user.username);
    }else{
        req.session.user={username:'谢某某'};
        res.send('欢迎登录');
    }

})*/

//引入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')));
/*针对ueditor的处理*/
//引入ueditor模块
var ueditor=require('ueditor');
//设置中间件处理ueditor的后台请求
app.use("/ueditor/getImg", ueditor(path.join(__dirname, '../lib'), function (req, 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('/',function (req,res) {
    res.sendFile(path.join(__dirname,'../ueditor.html'));
});

  诉求都未有发出去。

第一步:创制八个档次(略卡塔 尔(阿拉伯语:قطر‎

window.UEDITOR_CONFIG = { 
    //home 
    UEDITOR_HOME_URL: URL,
    // 服务器统一请求接口路径 
    serverUrl: URL   "jsp/controller.jsp",
    ... 
}

而U大切诺基L地址又是:

  然而在行使中相见二个标题,正是第贰遍上传图片时nodejs后台报错,说不经常文件找不到引致后台平素挂了

 效果如下:

  那就象征ueditor保存数据(上传图片等卡塔 尔(英语:State of Qatar)会计统计黄金年代央浼路线:top.ctx '/ueditor/ueditor'。所以大家在后台代码必然要对那一个必要路线做拍卖才行。 

查!

  亟待静心的是ueditor(path.join(__dirname, 'static'),...)设置保存文件(图片卡塔尔国的公文夹路线,是相对于这两天的文件路线。 

之所以在脚下安装的时候,大家的地址应该是【ueditor/getImg】

  在做要好的nodejs项目标时候碰到须要采纳ueditor。原本下载的是ueditor的jsp版本。目录如下 
  图片 9
  在ueditor.config.js中有配备服务器home路线(那么些home路线能找到ueditor文件夹,能够选拔这么些渠道访谈ueditor内的静态能源,比方我的top.ctx为 

 

  最后:

var imgDir = '/images/ueditor/'

  不过ueditor却从没nodejs版本,只好和煦写了,参照他事他说加以调查了。 

 

  还应该有四个上古板一路线 

  2.采用使用body-parser模块解析post央浼(主要图片和文书上传卡塔 尔(阿拉伯语:قطر‎

  所以当ueditor上传文件或自行存档的时候调用serverUrl路线找到相应的controller.jsp来管理。 

到此地,config的布署算是改革产生了,接下去正是管理路由了

  首先:

  1.创造服务

  图片 10

材料:

serverUrl: URL   "ueditor"

那样,就能够观看ueditor分界面了:

  

做完那些,重启服务,会发觉ueditor的图形上传功能就能够运用了。

//if (err) throw err;
if (err) return;//防止上传过程中报错导致后台直接挂掉throw err;

1. 在设置ueditor中间件的时候,第贰个参数【/ueditor/getImg】是指我们的图片上传乞请路线,之所以是其生机勃勃值的原因是ueditor.config.js文件中,我们对接口的安装为:

  如若以为本文不错,请点击右下方【推荐】!

 所以还必要更正一些原本的布局。

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符  : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
    /* 涂鸦图片上传配置项 */
    "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
    "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
    "scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */
    "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
    "scrawlInsertAlign": "none",
    /* 截图工具上传 */
    "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
    "snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
    /* 抓取远程图片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
    "catcherFieldName": "source", /* 提交的图片列表表单名称 */
    "catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "catcherUrlPrefix": "", /* 图片访问路径前缀 */
    "catcherMaxSize": 2048000, /* 上传大小限制,单位B */
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
    /* 上传视频配置 */
    "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
    "videoFieldName": "upfile", /* 提交的视频表单名称 */
    "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "videoUrlPrefix": "", /* 视频访问路径前缀 */
    "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
    /* 上传文件配置 */
    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName": "upfile", /* 提交的文件表单名称 */
    "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix": "", /* 文件访问路径前缀 */
    "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */
    /* 列出指定目录下的图片 */
    "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
    "imageManagerListPath": "/ueditor/php/upload/image/", /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
    /* 列出指定目录下的文件 */
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/ueditor/php/upload/file/", /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
    "fileManagerListSize": 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */
}
// 服务器统一请求接口路径
serverUrl: URL   "getImg"

  2.在中间件设置ueditor后台的请求管理

其中第2步:在node_modules目录(npm安装模块的目录卡塔 尔(阿拉伯语:قطر‎下找到ueditor模块,在中间有三个app.js文件,将文件内app.use的中间件设置代码拷贝到controller后台文件中就能够,稍后做一些大概的改动和设置。  

  1.一张用来装编辑器的html页面

 

先是,校正ueditor文件夹中的ueditor.config.js文件,内部有一句设置根目录的代码:

支持,须求转移后台管理图片和文件上传的接口:

图片 11

 

分界面如下:

 

图片 12

 

图片 13

//引入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,不过,竟然不协助nodeJS后台。

4.末段,假如顾客端发送其余的伸手,那么就将图纸文件上传的config配置音讯再次回到回去,而原先的config音讯贮存地方也许不是本身想要的,最佳的不二等秘书诀是,在ueditor目录下创建贰个nodejs目录,然后将php(前者ASP、Java卡塔尔国目录中的config.json文件拷贝进去,这样就足以了

  3.设置入口页面(私下认可加载ueditor.html卡塔 尔(英语:State of Qatar)

 

第二步: 

 

 

  1.第意气风发引进ueditor模块

那么,能够摸清,serverULANDL完全部应该是:【

 

2.其次个参数【ueditor(path.join(__dirname, '../lib')】,是安装ueditor模块需求起初化的ueditor所处的地点(将原本的ueditor改动为能够扶持nodejs的新本子,个人知道卡塔 尔(英语:State of Qatar),那么这里的【../lib】即为ueditor相对于当下controller文件的职位,再加上【__dirname】当前目录路线就可以拿到正确的ueditor包的地方

图片 14

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 nodejs ueditor