서머노트 편집기

1. 서머노트 편집기

• 이미지를 드래그하거나 선택했을 때, ajax로 서버에 전달하고, 서버에서 저장된 파일 경로를 반환받아 편집기 내부에 이미지를 표시한다.

<textarea id="summernote" class="note-editable" contenteditable="true" role="textbox"
aria-multiline="true" spellcheck="true" name="bn_content">${ncr.boardN.bn_content}</textarea>

// 서머노트 초기 설정
$('#summernote').summernote({
	height: 300,                 // 에디터 높이
	minHeight: null,             // 최소 높이
	maxHeight: null,             // 최대 높이
	focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
	lang: "ko-KR",					// 한글 설정
	placeholder: '최대 2048자까지 쓸 수 있습니다',
	callbacks: {
    		onImageUpload : function(files, editor, welEditable){
       			for (var i = files.length - 1; i >= 0; i--) {
				uploadSummernoteImageFile(files[i], editor, welEditable);
			}
		}
	}
});
// 이미지 업로드 할 때 실행되는 함수 정의
function uploadSummernoteImageFile(file, editor, welEditable ) {
	data = new FormData();
	data.append("file", file);
	$.ajax({
		data : data,
		type : "POST",
		url : "uploadImgTemp.do",
		contentType : false,
		enctype : 'multipart/form-data',
		processData : false,
		success : function(result){
			result = JSON.parse(result);
			$("#summernote").summernote('insertImage', result.url);
		}
	});
}