Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* textarea를 summernote로 변경
* require ['lodash', 'axios', 'summernote', 'jQuery']
* reference: https://summernote.org/deep-dive/
*
* @param {any} target summernote를 적용할 element id || class
* @param {any} options options 기본 옵션에 merge 시킬 세부 옵션
* @returns jQuery Element
*/
var initSummernotes = function(target, options) {
var $target = $(target)
var defaultOptions = {
lang: 'ko-KR',
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['insert', ['picture', 'link']],
['misc', ['undo', 'redo', 'codeview', 'help']]
],
popover: {
image: [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
},
dialogsInBody: true,
callbacks: {
onImageUpload: function(image) {
var fd = new FormData()
fd.append('image', image[0])
// 세부 폴더명 설정
fd.append('folder', 'board')
axios.post("/data2image", fd)
.then(function(response) {
// response.data의 모형은 서버에서 반환된 결과에 따른다
$target.summernote('insertImage', response.data.src, function($img) {
// image의 width를 css에서 관리하기 위해 style 속성을 제거한다
$img.removeAttr('style')
})
})
.catch(function(error) {
console.log(error)
})
},
onMediaDelete: function($target, editor, $editable) {
axios.delete("/data2image", {
data: {
src: $target.attr('src')
}
})
.then(function() {
$target.remove()
})
.catch(function(error) {
console.log(error)
})
}
}
}
var mergedOptions = _.merge(defaultOptions, options)
if ($target.length === 1) {
return $target.summernote(mergedOptions)
} else {
return $target.map(function($item) {
return $item.summernote(mergedOptions)
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.