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;

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です