ueditor-nodejs后台-支持本地存储和百度云存储bcs

nodejsueditor
小玩意集合nodejs自学杂记
发表时间: 2015/3/7 5:36:54

使用方法

1. 安装

npm install ueditor-nodejs --save

2. 到ueditor官网下载php版或者jsp版的ueditor,将ueditor放入public下，重命名文件夹为ueditor

3. 将ueditor.config.js中的serverURL改为 URL + "ue"

4. 注册后台

var ueditor = require('ueditor-nodejs');
app.use('/ueditor/ue', ueditor({//这里的/ueditor/ue是因为文件件重命名为了ueditor,如果没改名，那么应该是/ueditor版本号/ue
    configFile: '/ueditor/php/config.json',//如果下载的是jsp的，就填写/ueditor/jsp/config.json
    mode: 'bcs', //本地存储填写local
    accessKey: 'Adxxxxxxx',//本地存储不填写，bcs填写
    secrectKey: 'oiUqt1VpH3fdxxxx',//本地存储不填写，bcs填写
    staticPath: path.join(__dirname, 'public'), //一般固定的写法，静态资源的目录，如果是bcs，可以不填
    dynamicPath: '/blogpicture' //动态目录，以/开头，bcs填写buckect名字，开头没有/.路径可以根据req动态变化，可以是一个函数，function(req) { return '/xx'} req.query.action是请求的行为，uploadimage表示上传图片，具体查看config.json.
}));

动态目录示例，这里例子是这个博客中的一段代码，如果是我自己上传图片，就放在uploadimage下，访客的图片放在visitorimage下。dynamicPath参数填写这个函数就可以了。bcs暂不支持自动创建目录操作，所以，返回的bucket必须是存在的，buckect开头没有/。

var dynamicPath = function (req) {
    if (req.query.action == 'uploadimage') {//如果是上传图片
        if (req.session.isMe) {//如果是博主自己
            return '/uploadimage'
        } else {//其余的当作访客
            return '/visitorimage'
        }
    }
}


翻牌: 11284  临幸: 41
留言:
龙门外的鱼 说:
2015/3/8 11:8:25

自己顶一个。。。。。啦啦啦

龙门外的鱼 回复: 龙门外的鱼
2015/4/18 10:22:24

回复我自己。。。。。

mank 说:
2015/3/13 10:27:8

顶隔壁老于....啦啦啦

da 说:
2015/5/12 8:43:31

https://github.com/longmenwaideyu/ueditor-nodejs

正在使用您的ueditor-nodejs，很好用。

不过我现在想使用七牛图片云存储

http://developer.qiniu.com/docs/v6/sdk/nodejs-sdk.html

您有空可以了解下。

希望可以能够增加七牛的接口。

谢谢。


龙门外的鱼 回复: da
2015/5/13 14:33:35

你好，已经在邮件回复了您。七牛云存储也是我接下来要开发的，我会第一时间通知您开发进展。

桥下红药 说:
2015/10/4 13:11:41

bcs 改成了 bos 不知道功能是否还有效呢

龙门外的鱼 回复: 桥下红药
2015/10/14 10:38:11

失效了，本打算修改的，后来由于其他事情太忙，就放弃了

Hadoo 说:
2016/1/26 7:56:29

用起来很不错，配置也简单

龙门外的鱼 回复: Hadoo
2016/3/9 0:31:15

有人用很高兴，有问题欢迎反馈

jenkiHuang 说:
2016/1/26 9:22:59

ueditor.js的174行有一个base64Decode的调用，但是在util类中没有这个方法，导致在使用“涂鸦”功能的时候会出现服务器错误。


ueditor.js调用修改：

.(req..saveTo(err){
    .(err)})


fixed util类:

.= (datatopathcallback){
    fs = ()imageBuffer = (data)fs.(topathimageBuffer(err) {
       callback&&callback.(err)})}


还有在使用ueditor-nodejs的时候发现，好像所有上传的图片、附件都会保存在一个目录下面，导致后面维护内容的时候会有点头疼，所以在原有的基础上作出了点修改。

就是在调用的地方有一个配置动态目录的地方，作者也说了可以使用方法根据不同的req动态改变路径。

dynamicPath: '/blogpicture'
改成：dynamicPath:dynamicFun

function dynamicFun(req){
    var dir = "/blog";
    switch (req.query.action) {
        case 'config':
            break;
        case 'uploadimage':
            dir += "/img";
            break;
        case 'listimage':
            dir += "/img";
            break;
        case 'uploadscrawl':
            dir += "/scrawl";
            break;
        case 'uploadfile':
            dir += "/file";
            break;
        case 'uploadvideo':
            dir += "/video";
            break;
        case 'listfile':
            dir += "/file";
            break;
    }
    return dir;
}


这样的话在目录下面会根据内容生成不同的子目录，在后期维护内容的时候更方便些。

在此还是非常感谢作者开发的这个组件，方便了很多使用node的开发者。



jenkiHuang 说:
2016/1/26 9:25:19

代码居然乱了，重贴一份...

util.base64Decode(req.body.upfile, saveTo,function(err){
    console.log(err);
    return false;
});
util.base64Decode = function(data,topath,callback){
    var fs = require("fs");
    var imageBuffer = new Buffer(data, 'base64');
    fs.writeFile(topath, imageBuffer, function(err) {
        callback&&callback.call(err);
    });
}


龙门外的鱼 回复: jenkiHuang
2016/1/28 8:52:52

赞。十分感谢您的意见和建议。这个插件是为我的博客配套开发的。既然有人用，我一定会持续的维护下去。

jenkiHuang 回复: 龙门外的鱼
2016/1/28 8:59:47

，好东西肯定要顶，支持维护

jenkiHuang 说:
2016/3/2 2:53:8

ueditor.js 第78行，当从未上传过照片到服务器时，点击“在线管理”标签,些时files为undefined，所以下面对files进行for 循环会报错。

Cannot read property 'length' of undefined

修复方案:

files = files || [];
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var extname = path.extname(file);
    //console.log(file);
    if (fileType.indexOf(extname.toLowerCase()) >= 0) {
        data.push({
            'url': urlRoot + '/' + file
        });
    }
}


龙门外的鱼 回复: jenkiHuang
2016/3/9 0:49:18

已经修改上传npm。十分感谢！

BYmax1 说:
2016/3/6 5:18:18

博主大大真是帮了我一个大忙。。不过一旦修改了静态目录，图片加载就会出错，各种bug。。请问要怎么修改呢？

龙门外的鱼 回复: BYmax1
2016/3/9 0:37:6

你是说你将整个web应用的静态目录做了修改？ app.use(express.static(path.join(__dirname, '改了这里')));

那么原先上传的图片后返回给前端ueditor的的路径就错了。就是说你数据库里存的html片段里的路径已经不存在了。你可以从数据库里读出html，用正则的方法替换掉原先的路径。

Lee 说:
2016/3/21 15:5:49

非常感谢，请问怎么实现自定义目录啊。

Lee 回复: Lee
2016/3/21 15:15:0

自定义上传的文件名才对

龙门外的鱼 回复: Lee
2016/3/23 12:40:30

自定义目录本文就有介绍。jenkiHuang 的回复中也有例子。但是自定义上传名字还不能支持，ueditor前端就没有能填写文件名的地方。

如果是说文件名在后台以您自己的格式生成，而不是以日期做名字的话。可以需要自己改一下代码，目前还没有这个接口。

Lee 回复: 龙门外的鱼
2016/3/23 12:43:15

哦哦，了解了。如果自己修改代码，应该是哪段代码呢？

龙门外的鱼 回复: Lee
2016/3/23 13:46:19

util.js第七行，getFileName函数。

Lee 回复: 龙门外的鱼
2016/3/29 4:2:51

成功了,非常感谢。

龙门外的鱼 回复: Lee
2016/3/30 1:53:26

哈，赞！我做的东西有欠缺。还得自己改代码。忙完这阵我大修一下。

blue 说:
2016/10/12 5:43:40

博主你好，请问能否分享下使用七牛云的存储的代码

龙门外的鱼 回复: blue
2016/10/15 6:27:54

不好意思，我没做七牛的。

CGerAJ 说:
2016/10/19 13:8:23

NODE.JS EXPRESS模块 按照以上方法配置  SCHEMA文件正常

数据模型定义正常，  ueditor内的内容无法发送到本地的DB数据库内~



龙门外的鱼 回复: CGerAJ
2016/10/21 2:3:18

上面的配置是如何在后台拿到web端传来的数据，写数据库是要有您自己实现。上面的配置并没有写数据库的功能。

小石头 说:
2017/3/5 1:5:50

现在不能使用了么？

blob.png

龙门外的鱼 回复: 小石头
2017/3/8 14:59:40

第一个warn可以忽略。

第二个warn因为你在ueditor-nodejs-master的目录下面安装ueditor-nodejs是不被允许的。自己安装自己，自己依赖自己。


老牛 说:
2017/10/20 14:4:10

我都按照你的配置了 为什么还是上传错误呢？ 我是本地上传

龙门外的鱼 回复: 老牛
2017/11/20 5:22:21

可以把错误异常发过来看看

老菜 说:
2020/1/19 3:58:40

遇到个问题，请教下，

1、前端发的内容如下

image.png



2、后端的信息

image.png


3、要怎么做res才能返回？

老菜 回复: 老菜
2020/1/19 4:2:3

image.png



动态目录函数这样写可以吗？

龙门外的鱼 回复: 老菜
2020/1/20 1:28:16

动态目录写法没问题，前端请求里action的值就是目录名。是相对于staticPath下的目录。

您说的代码没执行是因为你调用了18行的ueditor函数，它返回了一个function，这里只是返回了一个function并没有去执行它。这个返回的function是用来注册到expressjs里当作route用的，当前端有请求过来，expressjs才回真正去执行这个函数，这个时候才会执行到第40行。

你看我在博客里的第一段代码，是是app.use注册到expressjs中了。

var ueditor = require('ueditor-nodejs');
app.use('/ueditor/ue', ueditor({//这里的/ueditor/ue是因为文件件重命名为了ueditor,如果没改名，那么应该是/ueditor版本号/ue
    configFile: '/ueditor/php/config.json',//如果下载的是jsp的，就填写/ueditor/jsp/config.json
    mode: 'bcs', //本地存储填写local
    accessKey: 'Adxxxxxxx',//本地存储不填写，bcs填写
    secrectKey: 'oiUqt1VpH3fdxxxx',//本地存储不填写，bcs填写
    staticPath: path.join(__dirname, 'public'), //一般固定的写法，静态资源的目录，如果是bcs，可以不填
    dynamicPath: '/blogpicture' //动态目录，以/开头，bcs填写buckect名字，开头没有/.路径可以根据req动态变化，可以是一个函数，function(req) { return '/xx'} req.query.action是请求的行为，uploadimage表示上传图片，具体查看config.json.
}));

完整代码在这里https://github.com/longmenwaideyu/expressjs-blog/blob/master/useRoutes.js

https://github.com/longmenwaideyu/expressjs-blog/blob/master/app.js 第31行