Node.js 整合 KindEditor 实现图片上传功能

Node.js 整合 KindEditor 图片上传教程

KindEditor 官网提供了 ASP、ASP.NET 和 JSP 等语言的整合示例，参考地址为 http://kindeditor.net/docs/upload.html。相比之下，使用 Node.js 进行整合实现起来更为简便。

开发环境配置如下：操作系统为 Ubuntu 14.10，Node.js 版本为 0.10.35，Express 框架版本为 4.11.2，文件解析库 formidable 版本为 1.0.16，富文本编辑器 KindEditor 版本为 4.1.10，开发工具使用 WebStorm 8。

首先，通过集成开发环境（IDE）或终端命令行，创建一个名为 test 的项目工程。

接着，编辑 package.json 文件，添加 formidable 依赖，指定版本为 1.0.16。保存后，在终端执行 npm install 命令以安装所有依赖包。

将 KindEditor 的完整目录复制到 test 项目的 public/lib 文件夹下，确保前端资源路径正确。

随后修改 index.ejs 和 index.js 文件。在 index.ejs 中配置 KindEditor，将其 uploadJson 属性指向 Node.js 后端提供的图片上传路由，此处设定为 /uploadImg。在 index.js 中，添加对应 /uploadImg 路由的 POST 请求处理逻辑，具体代码如下所示。

前端视图文件 index.ejs 的代码实现如下：

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script charset="utf-8" src="/lib/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="/lib/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script>
var options = {
uploadJson: '/uploadImg'
          };
KindEditor.ready(function(K) {
window.editor = K.create('#editor', options);
          });
</script>
</head>
<body>
<h1><%= title %></h1>
<textarea id="editor" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>
</body>
</html>

后端路由文件 index.js 的代码实现如下：

var express = require('express');
var router = express.Router();
var formidable = require('formidable');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: '图片上传' });
});
router.post('/uploadImg', function(req, res, next) {
var form = new formidable.IncomingForm();
form.keepExtensions = true;
form.uploadDir = __dirname + '/../public/upload';
form.parse(req, function (err, fields, files) {
if (err) {
throw err;
        }
var image = files.imgFile;
var path = image.path;
path = path.replace('/\\/g', '/');
var url = '/upload' + path.substr(path.lastIndexOf('/'), path.length);
var info = {
"error": 0,
"url": url
        };
res.send(info);
    });
});
module.exports = router;

最后，通过 IDE 或终端启动 test 工程。访问 http://localhost:3000 即可看到页面，并测试图片上传功能是否正常。