-

[링크 : 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]



'프로그램 사용 > ckeditor(웹에디터)' 카테고리의 다른 글

ckeditor full과 standard 그리고 옵션 설정  (0) 2019.04.03
ckeditor 모드별 모양  (0) 2019.03.08
ckeditor / fckeditor?  (0) 2014.07.16
ckeditor 사용하기  (0) 2013.02.22
fckeditor plugin for squirrelMail  (0) 2011.06.14
Posted by 구차니