Summernote 두번째 이야기 - 이미지 업로드 커스텀

2015/09/14 월요일..

Summernote 가 버전업이 되면서, 아래와 같이 사용하는 방법의 변형이 필요하게 되었습니다.

현재 저도 업데이트하면서 보고 있으니 잠시만 기다려 주세요.

---

Super Simple WYSIWYG Editor on Bootstrap

예전에 TIP 게시판에 올렸던 Summernote 의 두번째 시간 입니다.

이 에디터를 가지고 개발을 진행하던 중에 에디터에서 이미지 처리하여 이슈가 있어서 해당 이슈의 해결 방법에 대해서 한번 정리를 해보려고 합니다.

summernote 에디터는 다양한 기능이 있고, 제가 원했던 기능 중의 하나는 이미지가 바로 텍스트로 삽입 되는 점이 였습니다~!!

그런데 이게 고사양 이미지가 점점 많이 늘어나게 되면 굉장히 부담 스러워 지는 것 같더라고요.

그래서 이미지 첨부시에 해당 이미지를 사이즈를 줄여서 PC에 저장하고, 저장된 이미지를 다시 에디터에 심을 수는 없을까? 라는 생각으로 구현 방향을 생각했습니다.

역시나!! 기대를 져버리지 않는 Summernote!!! 그리고 구글 신님ㅎㅎ

플로우는 다음과 같습니다.

기존의 텍스트로 이미지가 삽입되는 대신에 summernote의 이미지 업로드 이벤트를 이용해서 ajax를 통해 비동기 업로드를 진행하고, 업로드 후 이미지 URL을 리턴 받아 에디터에 URL을 이용해서 이미지가 삽입 되도록 하는 것입니다!! 정말 쉽죠?

	
$('#summernote').summernote({
		height : 350,
		onImageUpload : function(files, editor, welEditable) {
			sendFile(files[0], editor, welEditable);
		},
		lang : 'ko-KR'
	});

소스에서 볼수 있듯이 summernote 에디터는 onImageUpload 라는 이벤트를 내장하고 있습니다.

일단, 단일 이미지 파일 처리로 되도록 하였고.

sendFile이라는 function을 만들어서 ajax 요청을 날리려고 합니다.

function sendFile(file, editor, welEditable) {
	data = new FormData();
	data.append("uploadFile", file);
	$.ajax({
		data : data,
		type : "POST",
		url : "/imageUpload",
		cache : false,
		contentType : false,
		processData : false,
		success : function(data) {
			editor.insertImage(welEditable, data.url);
		}
	});
}

이런 느낌이 될 것 같네요~!!

서버단에서 url 맵핑 받아서 데이터를 받은 다음에 디비에 정보를 넣고, 파일은 PC에 저장하고, 해당 시퀀스나 유니크한 파일 이름을 생성해서 문자열로 링크를 생성해서 리턴해주었습니다.

( 서버단은.. 많은 사람들마다 구현 방법이 다르니^^... 파일 업로드와 이미지 스트림 정도만 해결 하시면 되요 )

보시면 data에 url이 담겨져 오구요. editor.insertImage(welEditable, data.url);

이런식으로 하면~! 이미지 업로드 성공 후 에디터에는 피시에 저장시킨 이미지로 출력이 딱! 됨을 알 수 있습니다~!!!

summernote의 경우에는 MIT 라이센스로 자유롭게 사용할 수 있도록 해준 에디터인데요

정말 감사드리고 또 감사드려야 할 법한 에디터 입니다^^

그럼 다음 시간에는 Summernote 에 유투브나 vimeo 같은 동영상이 아닌 직접 업로드한 동영상을 삽입하는 방법에 대해서도 한번 정리를 해보도록 하겟습니다.

감사합니다 ^^