node-ueditor用法
发布于 9 年前 作者 i5ting 13663 次浏览 最后一次编辑是 8 年前 来自 分享

ueditor是一个所见即所得的编辑器,baidu那些人写的,还不错

http://ueditor.baidu.com/website/

node版本后台

可以在这里找到,http://ueditor.baidu.com/website/thirdproject.html

Node.js:ueditor

可你让您的UEditor 兼容nodejs。Node.js:ueditor@0.0.4以及更高版本,支持图片上传,图片批量管理等。您可以通过npm install ueditor 直接安装此插件。项目代码已经发放到github上,欢迎关注此项目。

源码地址: https://github.com/netpi/ueditor

服务器端用法

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) {
  // ueditor 客户发起上传图片请求
  if(req.query.action === 'uploadimage'){
    var foo = req.ueditor;
    var date = new Date();
    var imgname = req.ueditor.filename;

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

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

注意包得引用和配置项即可。再有就是提前创建好目录,防止报错。

客户端用法

步骤1: 下载ueditor解压到public,

步骤2: 修改/ueditor/ueditor.config.js

  window.UEDITOR_CONFIG = {

      //为编辑器实例添加一个路径,这个不能被注释
      UEDITOR_HOME_URL: URL

      // 服务器统一请求接口路径
      , serverUrl: URL + 'ue'

serverUrl必须和上面的服务器端配置的一样

步骤3:修改/ueditor/ueditor.config.json

主要是修改路径

更多用法,http://ueditor.baidu.com/doc

谨慎multer

如果你的项目使用了multer作为上传组件,那么你要小心了

一定要在multer之前加载ueditor,不然请求会被multer拦截,这是connect中间件的弊病

如果各位有兴趣,可以fork一笑ueditor,改成和multer兼容的,必然会有很多star

全文完

欢迎关注我的公众号【node全栈】

node全栈.png

原文

6 回复

谁有兴趣把https://github.com/netpi/ueditor改成基于multer的?

@i5ting 晚上回去折腾下~~

@DevinXian 把busboy替换成multer就可以了

image.png 这里就直接上传图片了,我怎么获得上传的图片地址,返回到前端?

步骤3:修改/ueditor/ueditor.config.json

主要是修改路径 说了等于没说

服务器端如何配置能否讲的细致一点。。。

回到顶部