{"id":4299,"date":"2017-10-02T00:24:21","date_gmt":"2017-10-01T15:24:21","guid":{"rendered":"https:\/\/kumapress.com\/wp\/?p=4299"},"modified":"2017-10-02T00:24:21","modified_gmt":"2017-10-01T15:24:21","slug":"wysiwyg%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%81%aesummernote-node-js-%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f","status":"publish","type":"post","link":"https:\/\/kumapress.com\/?p=4299","title":{"rendered":"WYSIWYG\u30a8\u30c7\u30a3\u30bf\u306esummernote + node.js \u3067\u5b9f\u88c5\u3057\u3066\u307f\u305f"},"content":{"rendered":"

\"\"<\/p>\n

WYSIWYG\u30a8\u30c7\u30a3\u30bf\u306e\u4ee3\u8868\u683c(\uff1f)\u306eCKEditor\u304c\u5546\u7528\u5229\u7528\u304c\u6709\u6599\u3068\u306a\u306e\u3067\u3001\u30bd\u30ec\u4ee5\u5916\u306e\u30a8\u30c7\u30a3\u30bf\u30fc\u3092\u63a2\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n

Bootstrap\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u300cbootstrap-wysihtml5\u300d<\/a>\u3063\u3066\u3082\u8003\u3048\u305f\u3093\u3067\u3059\u304c\u3001\u753b\u50cf\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u304c\u3081\u3093\u3069\u3044\u306a\u3041\u3002\u3002\u3002<\/p>\n

\u3063\u3066\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u300csummernote\u300d<\/a>\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3068\u3057\u307e\u3057\u305f\u3002<\/p>\n

view\u5074\u306e\u5b9f\u88c5<\/h2>\n

\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n

\u30d0\u30c3\u30b5\u30ea\u3068\u629c\u7c8b\u3057\u3066\u3044\u307e\u3059(^^)<\/p>\n

<html><\/code>
\n\u00a0\u3000\u3000\u3000<head><\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta\/css\/bootstrap.min.css\"><\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/summernote\/0.8.8\/summernote.css\" rel=\"stylesheet\"><\/code>
\n\u00a0\u3000\u3000\u3000\u3000<\/head><\/code>
\n\u00a0\u3000\u3000\u3000<body><\/code>
\n\u00a0\u3000\u3000\u3000\u3000\u3000\u3000\u3000<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.js\"><\/script><\/code>
\n\u00a0\u3000\u3000\u3000\u3000\u3000\u3000\u3000<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta\/js\/bootstrap.min.js\"><\/script><\/code>
\n\u00a0\u3000\u3000\u3000\u3000\u3000\u3000\u3000<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/summernote\/0.8.8\/summernote.js\"><\/script><\/code>
\n\u00a0\u3000\u3000\u3000\u3000\u3000\u3000\u3000<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/summernote\/0.8.8\/lang\/summernote-ja-JP.js\"><\/script><\/code>
\n\u00a0\u3000\u3000\u3000<\/body><\/code>
\n<\/html><\/code><\/p>\n

HTML<\/h3>\n

<\/code><div class=\"form-group form-inline\"><\/code>
\n\u00a0\u3000\u3000\u3000<label>\u5185\u3000\u3000\u5bb9\u3000\uff1a<\/label><\/code>
\n\u3000\u3000\u3000\u3000<textarea class=\"form-control\" id=\"summernote\" name=\"comment\"><\/textarea><\/code>
\n\u3000\u3000<\/div><!-- end \u5185\u5bb9 --><\/code><\/p>\n

\u3053\u308c\u3067summernote\u306e\u30ef\u30af\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n

\u30b9\u30af\u30ea\u30d7\u30c8<\/h3>\n

<script type=\"text\/javascript\"><\/code>
\n\u00a0\u3000$(function() {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000$('#summernote').summernote({<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000tabsize: 2,<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000height: 300,<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000fontNames: [\"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\"],<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000lang: \"ja-JP\",<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000callbacks : {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000onImageUpload: function( files, editor, welEditable ) {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000sendFile( files[0], editor, welEditable );<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000}<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000}<\/code>
\n\u3000\u3000\u3000});<\/code>
\n\u3000\u3000\u3000function sendFile( file, editor, welEditable ) {
\nvar form_data = new FormData();
\nform_data.append( \"datafile\", file );
\n$.ajax({
\nurl : \"\/nj\/upload\",
\ntype : \"POST\",
\ndata : form_data,
\ncache : false,
\ncontentType : false,
\nprocessData : false,
\nsuccess : function( url ) {
\n\/\/ editor.insertImage( welEditable, url );
\n$('#summernote').summernote( 'editor.insertImage', url );
\n}
\n})
\n.done( function( data, textstatus, jqXHR ) {
\n})
\n.fail( function( data, textstatus, errorThrown ) {
\nalert( \"fail:\" + textstatus );
\n});
\n}
\n<\/code><\/script><\/code><\/p>\n

height\u3092\u6307\u6458\u3057\u3066\u304a\u304b\u306a\u3044\u3068\u3001\u9ad8\u3055\u304c\u306a\u304f\u306a\u3063\u3061\u3083\u3044\u307e\u3059(^^;<\/p>\n

callbacks\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u51e6\u7406\u3092\u30b3\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n

\u305d\u306e\u4ed6\u306e\u300ccallbacks\u300d<\/a>\u306f\u3053\u3061\u3089\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n

Node.js\u5074\u306e\u5b9f\u88c5<\/h2>\n

multer\u4f7f\u3044\u307e\u3059\u3002<\/p>\n

\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u5bb9\u91cf\u3092\u5897\u3084\u3057\u307e\u3059\u3002<\/p>\n

\u30c7\u30d5\u30a9\u30eb\u30c8\u306f100kB\u3057\u304b\u7121\u3044\u3082\u3093\u3067\u3002\u3002\u3002\u3067\u306a\u3044\u3068\u300c413 Request Entity Too Large\u300d\u3067\u307e\u3059w<\/p>\n

app.js<\/p>\n

\/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u5897\u3084\u3059\uff1adefault 100kb<\/code>
\n \/\/app.use(bodyParser.urlencoded({ extended: false }));<\/code>
\n app.use(bodyParser.urlencoded({ limit: '50mb', extended: false }));<\/code><\/p>\n

routes\u306e\u5b9f\u88c5<\/code><\/p>\n

var express = require('express');<\/code>
\n var config = require('config');<\/code>
\n var fs = require('fs');<\/code><\/p>\n

var logger = require('..\/modules\/logger');<\/code>
\n var router = express.Router();<\/code>
\n var multer = require( 'multer' );<\/code><\/p>\n

let storage = multer.diskStorage({<\/code>
\n\u3000\u3000\u3000\u3000destination : function( req, file, call_bk ) {<\/code>
\n\u3000\u3000\u3000\u3000call_bk( null, config.conf.upload_dir );<\/code>
\n },<\/code>
\n filename : function( req, file, call_bk ) {<\/code>
\n\u3000\u3000\u3000\u3000call_bk( null, file.originalname );<\/code>
\n }<\/code>
\n });<\/code>
\n let memStorage = multer.memoryStorage({<\/code>
\n\u3000\u3000\u3000\u3000filename : function( req, file, call_bk ) {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000call_bk( null, file.originalname );<\/code>
\n\u3000\u3000\u3000\u3000}<\/code>
\n });<\/code><\/p>\n

let fileName = \"\"<\/code>
\n let upload;<\/code><\/p>\n

router.get('\/', function(req, res, next) {<\/code>
\n\u3000\u3000\u3000\u3000res.render( 'upload_test', { title : 'Express' });<\/code>
\n });<\/code><\/p>\n

router.post('\/upload', function( req,res ) {<\/code>
\n\u3000\u3000\u3000\u3000\/\/ res.setHeader( 'Content-Type', 'text\/plain' );<\/code>
\n\u3000\u3000\u3000\u3000upload = multer({ storage: storage }).single('datafile');<\/code>
\n\u3000\u3000\u3000\u3000upload( req, res, function( err ) {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000if( err ) {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/ res.send( \"Failed to write \" + req.file.destination + \" with \" + err );<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000res.send( \"Failed to write \" + \" with \" + err );<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000} else {<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000logger.system.debug( '\/api\/upload:req:originalname:' + req.file.originalname );<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000res.send( config.conf.viewer_dir + '\/' + req.file.originalname );<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000}<\/code>
\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000res.end();<\/code>
\n\u3000\u3000\u3000\u3000});<\/code>
\n });<\/code>
\n module.exports = router;<\/code><\/p>\n

 <\/p>\n