Code Monkey home page Code Monkey logo

ueditor's Introduction

Node.js : ueditor

UEditor 官方支持的版本有PHP JSP ASP .NET.

ueditor for nodejs 可以让你的UEditor支持nodejs

[email protected] 已经全面升级 。

##Installation

 npm install ueditor --save

Usage

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')
}}));

七牛上传

var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());

// 支持七牛上传,如有需要请配置好qn参数,如果没有qn参数则存储在本地
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), {
    qn: {
        accessKey: 'your access key',
        secretKey: 'your secret key',
        bucket: 'your bucket name',
        origin: 'http://{bucket}.u.qiniudn.com'
    }
}, function(req, res, next) {
  // ueditor 客户发起上传图片请求
  var imgDir = '/img/ueditor/'
  if(req.query.action === 'uploadimage'){
    var foo = req.ueditor;

    var imgname = req.ueditor.filename;

    
    res.ue_up(imgDir); //你只要输入要保存的地址 。保存操作交给ueditor来做
  }
  //  客户端发起图片列表请求
  else if (req.query.action === 'listimage'){
    
    res.ue_list(imgDir);  // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {

    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')
}}));

FDFS上传

var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());

//FDFS config 参数配置
var ueditorConfig = {
  fdfs: {
    /* Require 必须 */
    upload: {
      host: '192.168.0.40', //fdfs 上传服务器 host
      port: '22122'  // 上传服务器端口(一般默认22122)
    },
    download: {
      host: '192.168.0.82' //fdfs 下载服务器host
    },
    /* Require 必须 */
    /* 可缺省 */
    defaultExt: 'jpg', //默认后缀为png
    charset: 'utf8', //默认为utf8
    timeout: 20 * 1000 //默认超时时间10s
    /* 可缺省 */
  }
};

// 支持FDFS上传,upload跟download字段必填
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'),  ueditorConfig, function(req, res, next) {
  // ueditor 客户发起上传图片请求
  var imgDir = '/img/ueditor/'
  if(req.query.action === 'uploadimage'){
    var foo = req.ueditor;

    var imgname = req.ueditor.filename;

    
    res.ue_up(imgDir); //你只要输入要保存的地址 。保存操作交给ueditor来做
  }
  //  客户端发起图片列表请求
  else if (req.query.action === 'listimage'){
    
    res.ue_list(imgDir);  // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {

    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')
}}));

多类型文件上传 (附件 视频 图片)

var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());

app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
  var imgDir = '/img/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 (ActionType === 'listimage'){
    
    res.ue_list(imgDir);  // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {
    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')
}}));

上传配置

app.use("/ueditor/ue", static_url, config = {}, callback);

当config为空时,会默认把图片上传到 static_url + '/img/ueditor' 目录下。
比如例子“Usage”中图片会上传到项目的 public/img/ueditor 目录。

当配置了 config.qn 图片则只会上传到七牛服务器而不会上传到项目目录。
同时上传到七牛和项目目录,只需配置 config.local 即可

config = {
  qn: { ... },
  local: true 
}

你可以来ueditor:nodejs给作者留言

ueditor's People

Contributors

anilpixel avatar chenqj1118 avatar jindasong avatar netpi avatar svenzhao avatar xiaokaike avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ueditor's Issues

ie8上传单图的时候报错怎么解决

ie8上传单图的时候24839行报不支持此方法的错误 就是下面的代码块 谁遇到过怎么解决的?
if (whitList[tagName].indexOf(key) === -1) {
node.setAttr(key);
}

快速多次上传 会出现报错 是流没有监听关闭

修改如下 index.js 74行 流没有监听 关闭结束 就返回json了

                var tmp=fs.createWriteStream(tmpdir)
                file.pipe(tmp);
                tmp.on('close',function () {
                    fse.move(tmpdir, dest, function (err) {
                        if (err) throw err;
                        res.json({
                            'url': path.join(img_url, name),
                            'title': req.body.pictitle,
                            'original': filename,
                            'state': 'SUCCESS'
                        });
                    });
                })

上传图片失败

/ueditor/ue?action=uploadimage
Request Headers :Provisional headers are shown

path not defined 错误

错误提示: app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
^

ReferenceError: path is not defined

求助!

webpack

不支持webpack打包吗?他引用了node 的内置模块fs

windows下图片上传后路径不正确bug修复

windows下图片上传后路径“\web\images\ueditor\752116828301561856.jpg” 为反斜杠
我调整了下代码,做了转义,修复了这个 bug
line79 'url': path.join(img_url, name).replace(//g,'/'),

我的ueditor图片无法上传,但是没报错,请问怎么回事呢

app.use("/edit/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {
//客户端上传文件设置
var imgDir = '/public/upload/';
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 {
res.setHeader('Content-Type', 'application/json');
res.redirect('/public/ueditor/nodejs/config.json');
}
}));

图片上传问题

有没有本地图片绝对URL转相对URL的功能啊,好像在说明里没有看到

附件上传问题

请问如何实现附件上传啊?我在app.js中的代码如下,但是出错了

//ueditor
app.use("/libs/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {

// ueditor 客户发起上传文件请求
if (req.query.action === 'uploadfile') {
var foo = req.ueditor;
var date = new Date();
var filename = req.ueditor.filename;

var file_url = '/files';
res.ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
}

// 客户端发起文件列表请求
else if (req.query.action === 'listfile') {
var dir_url = '/files';
res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
}

// 客户端发起其它请求
else {
res.setHeader('Content-Type', 'application/json');
res.redirect('/libs/ueditor/nodejs/config.json')
}

}));

IE8 IE11下载 选择单图(uploadimage)上传 会提示下载文件

IE下 单图上传 按照示例

if (req.query.action === 'uploadimage') {
    // var foo = req.ueditor;
    // var date = new Date();
    // var imgname = req.ueditor.filename;
    var img_url = '/img/ueditor/';
    res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
}

会提示下载json文件
需要在加入一句 res.setHeader('Content-Type', 'text/html');

来解释响应头

can you give a concrete example?

@netpi
I am using ueditor, but the new version 1.4.3 did not work well in my example. Especially, when I use google browser opened it, but the firefox browser was ok. So I chosed to use umeditor. However, do you know how I can make the ueditor 1.4.3 work well?
Besides, I also wanted to use your module to dule with image uploading, what version of ueditor are you using? Can you give me a concrete example. I just could not make it work. Thank you so much.

nodejs使用的时候上传第二张图片报错说找不到临时文件

项目还没有部署到网上去,用的本地作为服务器。
上传第一张的时候没有问题。上传第二张的时候就会报错。使用chrome查看最后一个传递到服务端的请求提示为“Provisional headers are shown”,意味着请求根本就没有发出去。

而nodejs后台已经挂了提示node_modules\ueditor\index.js:77
if(err) throw err;

Error:ENOENT: no such file or directory, link 'C:\Users\ADMINI~1\AppData\Local\Temp\Desert.jpg' -> 'F:\chuaNodejs\chuayyqing\static\images\ueditor\705214004658163712.jpg'
at Error (native)

insertcode 功能

在config文件的toolbar里面添加insertcode配置项发现该功能未能实现。

Cannot find module 'busboy'

测试example

cnpm install
npm start

Error: Cannot find module 'busboy'

cnpm install busboy

Error: Cannot find module 'busboy',依旧

busboy库安装成功后,启动example还是提示未安装(linux单独跑您的例子)?

直接运行example的app.js,提示安装 express ejs 然后是busboy,前面两个安装好后正常,busboy安装全局或者项目内,安装好后启动app.js始终提示未安装busboy。
还有一个问题是,在网页中使用了您的富文本框后,运行成功,但是上传图片时,图片插件加载失败,提示是:你未正常加载你的配置文件,按照很多网友的说法都去试了,本地运行正常,上传到服务器就失败,目前就这两个问题。
刚开始使用,不是很熟悉,或许很简单,但望指引迷津,thanks

图片上传错误

我重新写的一个路由,总是报上传图片错误,请问这是为什么?和public下的文件夹层数没有关系吧?我只是多了一层而已,是出来需要配服务路径,还需要更改哪里,求赐教

怎么处理上传文件?使用默认的处理返回“服务器返回错误”

我使用了示例代码中的处理方式,上传图片和查看图片列表都没有问题,但是文件就不行。

app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {
    if ('uploadimage' === req.query.action) {
        res.ue_up('/ueditor/nodejs/upload/image/');
    } else if ('listimage' === req.query.action) {
        res.ue_list('/ueditor/nodejs/upload/image/');
/*注释掉了
    } else if ('uploadfile' === req.query.action) {
        res.ue_up('/ueditor/nodejs/upload/file/');
    } else if ('listfile' === req.query.action) {
        res.ue_list('/ueditor/nodejs/upload/file/');
*/
    } else {
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
}));

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.