The official website of kindEditor provides integrated applications related to ASP, ASP.NET, and JSP. The http://kindeditor.net/docs/upload.html can refer to the integration of nodejs, and find that practical nodejs is simpler
environment:
unbuntu 14.10
nodejs 0.10.35
express 4.11.2
formidable 1.0.16
kindEditor 4.1.10
webStorm 8
1. Create a project named test through IDE or terminal
2. Edit package.json to add the Formidable dependency, which is used here. Version 1.0.16, and then execute npm install through the terminal to complete the installation of the dependency.
3. Put the entire directory of kindEditor in test/public/lib
4. Modify index.ejs and index.js files
Integrate kindEditor in index.ejs:
Set the uploadJson of kindEditor to the route url for processing image upload provided by nodejs. Here is /uploadImg
Add the route url to process image upload in index.js:
Add the post processing method corresponding to /uploadImg,
The code is as follows:
index.js
The code copy is as follows:
<!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">
<strong>HTML content</strong>
</textarea>
</body>
</html>
index.js
The code copy is as follows:
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: 'Image Upload' });
});
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;
Then start the test project through the IDE or terminal, and access the page through http://localhost:3000 to upload the picture