WYSIWYGエディタのsummernote + node.js で実装してみた
WYSIWYGエディタの代表格(？)のCKEditorが商用利用が有料となので、ソレ以外のエディターを探していました。
Bootstrapを使っているので、「bootstrap-wysihtml5」っても考えたんですが、画像のアップロードがめんどいなぁ。。。
ってことで、今回は「summernote」を利用することとしました。
目次
view側の実装
インストール
バッサリと抜粋しています(^^)
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/lang/summernote-ja-JP.js"></script>
</body>
</html>
HTML
<div class="form-group form-inline">
<label>内 容 ：</label>
<textarea class="form-control" id="summernote" name="comment"></textarea>
</div><!-- end 内容 -->
これでsummernoteのワクが表示されます。
スクリプト
<script type="text/javascript">
$(function() {
$('#summernote').summernote({
tabsize: 2,
height: 300,
fontNames: ["YuGothic","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo","sans-serif", "Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Tahoma","Times New Roman","Verdana"],
lang: "ja-JP",
callbacks : {
onImageUpload: function( files, editor, welEditable ) {
sendFile( files[0], editor, welEditable );
}
}
});
function sendFile( file, editor, welEditable ) {
var form_data = new FormData();
form_data.append( "datafile", file );
$.ajax({
url : "/nj/upload",
type : "POST",
data : form_data,
cache : false,
contentType : false,
processData : false,
success : function( url ) {
// editor.insertImage( welEditable, url );
$('#summernote').summernote( 'editor.insertImage', url );
}
})
.done( function( data, textstatus, jqXHR ) {
})
.fail( function( data, textstatus, errorThrown ) {
alert( "fail:" + textstatus );
});
}
</script>
heightを指摘しておかないと、高さがなくなっちゃいます(^^;
callbacksでダウンロード処理をコールします。
その他の「callbacks」はこちらをご覧ください。
Node.js側の実装
multer使います。
画像アップロードする容量を増やします。
デフォルトは100kBしか無いもんで。。。でないと「413 Request Entity Too Large」でますw
app.js
// アップロードするファイルサイズを増やす：default 100kb
//app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: false }));
routesの実装
var express = require('express');
var config = require('config');
var fs = require('fs');
var logger = require('../modules/logger');
var router = express.Router();
var multer = require( 'multer' );
let storage = multer.diskStorage({
destination : function( req, file, call_bk ) {
call_bk( null, config.conf.upload_dir );
},
filename : function( req, file, call_bk ) {
call_bk( null, file.originalname );
}
});
let memStorage = multer.memoryStorage({
filename : function( req, file, call_bk ) {
call_bk( null, file.originalname );
}
});
let fileName = ""
let upload;
router.get('/', function(req, res, next) {
res.render( 'upload_test', { title : 'Express' });
});
router.post('/upload', function( req,res ) {
// res.setHeader( 'Content-Type', 'text/plain' );
upload = multer({ storage: storage }).single('datafile');
upload( req, res, function( err ) {
if( err ) {
// res.send( "Failed to write " + req.file.destination + " with " + err );
res.send( "Failed to write " + " with " + err );
} else {
logger.system.debug( '/api/upload:req:originalname:' + req.file.originalname );
res.send( config.conf.viewer_dir + '/' + req.file.originalname );
}
res.end();
});
});
module.exports = router;
