-
[링크 : https://gist.github.com/RedactedProfile/ac48c270d2bbe739f9f3]
[링크 : https://ckeditor.com/docs/ckeditor4/latest/examples/fileupload.html]
[링크 : https://hashcode.co.kr/questions/3187/nodejs-ckeditor로-이미지를-올리기]
[링크 : https://www.npmjs.com/package/ckeditor]
+
2019.03.08
cke4_node.zip
ckeditor 4.11 을 기준으로 만든거고, 5.x 대에도 가능한지는 아직 테스트 하지 못함
express -e
를 이용하여 ejs로 express-generator로 생성후 아래의 파일을 수정함
index.js
var express = require('express');
var path = require('path');
var uuid = require('uuidv4');
var router = express.Router();
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});
router.post('/uploader', multipartMiddleware, function (req, res) {
var fs = require('fs');
var orifilepath = req.files.upload.path;
var orifilename = req.files.upload.name;
var srvfilename = uuid() + path.extname(orifilename);
fs.readFile(orifilepath, function (err, data) {
var newPath = __dirname + '/../public/uploads/' + srvfilename;
fs.writeFile(newPath, data, function (err) {
if (err) console.log({ err: err });
else {
html = "{\"filename\" : \"" + orifilename + "\", \"uploaded\" : 1, \"url\": \"/uploads/" + srvfilename + "\"}"
console.log(html)
res.send(html);
}
});
});
});
module.exports = router;
index.ejs
4.11과 4.9 둘 다 작동되는 것 확인
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!-- <script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script> -->
<script src="https://cdn.ckeditor.com/4.9.0/standard/ckeditor.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form>
<textarea id="ckeditor" name="content"></textarea>
</form>
<script>
CKEDITOR.replace('ckeditor', {
uploadUrl: '/uploader'
});
</script>
</body>
</html>
+
ckeditor 5 기준. 4랑 비교해서 에디터 생성하는 방법을 제외하면 동일하게 작동한다.
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form>
<textarea id="ckeditor" name="content"></textarea>
</form>
<script>
ClassicEditor
.create(document.querySelector('#ckeditor'), {
language: 'ko',
ckfinder: {
uploadUrl: '/uploader'
}
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
[링크 : https://okky.kr/article/461219]
[링크 : https://www.cikorea.net/bbs/view/qna?idx=19725&view_category=&lists_style=]
[링크 : https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html]
[링크 : https://stackoverflow.com/questions/17699763/ckeditor-using-and-integration-in-node-js-web-page]
[링크 : https://stackoverflow.com/questions/21378630/node-js-sails-js-wysiwyg-editor-images]
[링크 : https://github.com/sca-/sails-ckeditor-sample]
