[JSP] 네이버 스마트 에디터 연동 + 이미지파일 업로드 기능 추가

1. 네이버 스마트 에디터 파일 다운로드

 

 

http://dev.naver.com/projects/smarteditor/download

 

 

 

 

 

 

2. 이클립스 - 프로젝트 생성 (ex) SmartEditor2.8_project)

 

 

 

 

 

3. 에디터를 사용할 페이지에 소스 추가 (ex) /page/test/index.jsp에 에디터 적용)

 

 

* 스크립트 추가

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/SE2/js/HuskyEZCreator.js" charset="utf-8"></script>

 

* 에디터 호출 코드

<form action="/page/test/send.jsp" method="post" id="frm">
    <textarea name="smarteditor" id="smarteditor" rows="10" cols="100" style="width:766px; height:412px;">
    </textarea>
</form>

 

* 에디터 관련 스크립트 코드

$(document).ready(function() {
	var oEditors = []; // 개발되어 있는 소스에 맞추느라, 전역변수로 사용하였지만, 지역변수로 사용해도 전혀 무관 함.

	// Editor Setting
	nhn.husky.EZCreator.createInIFrame({
		oAppRef : oEditors, // 전역변수 명과 동일해야 함.
		elPlaceHolder : "smarteditor", // 에디터가 그려질 textarea ID 값과 동일 해야 함.
		sSkinURI : "/SE2/SmartEditor2Skin.html", // Editor HTML
		fCreator : "createSEditor2", // SE2BasicCreator.js 메소드명이니 변경 금지 X
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true, 
		}
	});

	// 전송버튼 클릭이벤트
	$("#savebutton").click(function(){
		//if(confirm("저장하시겠습니까?")) {
			// id가 smarteditor인 textarea에 에디터에서 대입
			oEditors.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);

			// 이부분에 에디터 validation 검증
			if(validation()) {
				$("#frm").submit();
			}
		//}
	})
});

// 필수값 Check
function validation(){
	var contents = $.trim(oEditors[0].getContents());
	if(contents === '<p>&bnsp;</p>' || contents === ''){ // 기본적으로 아무것도 입력하지 않아도 값이 입력되어 있음. 
		alert("내용을 입력하세요.");
		oEditors.getById['smarteditor'].exec('FOCUS');
		return false;
	}

	return true;
}

 

 

4. form submit을 할 때 정해준 action url페이지인 send.jsp 페이지 내에 코드 작성 (전송된 데이터 확인을 위한 페이지)

 

// 한글 인코딩을 위한 UTF-8 설정
request.setCharacterEncoding("utf-8");
out.println("<에디터 결과>");
out.println("<br/>");
out.println(request.getParameter("smarteditor"));	// html코드형식의 데이터

 

5. 에디터 템플릿에 존재하는 사진첨부 기능을 이용하여 에디터 내에 이미지 업로드하기

 

 

* Apache Commons FileUpload 라이브러리 다운로드

 

http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi

 

 

 

 

위 바이너리 zip 파일을 다운로드 받도록 합니다. 압축 해제 후 lib 디렉토리내에 존재하는 "commons-fileupload-1.3.2.jar"파일을 본인의 프로젝트의 lib 디렉토리내에 라이브러리를 추가합니다.

 

 

 

* Apache Commons IO 라이브러리 다운로드

 

http://commons.apache.org/proper/commons-io/download_io.cgi

 

 

 

 

Commons-io 라이브러리 역시 바이너리 zip 파일을 받도록 합니다. 역시 압축 해제 후 commons-io-2.5.jar 파일을 프로젝트의 lib 디렉토리에 해당 라이브러리를 추가합니다.

 

 

 

[싱글 업로드 설정]

 

/SE2/sample/photo_uploader/photo_uploader.html 파일 열어보면

<form> 태그가 하나 존재하는데 action에 작성되어있는 url이 의미가 없습니다.

헷갈리지않게 action="FileUploader.php" 이부분을 제거합니다.

다음으로 /SE2/sample/photo_uploader/attach_photo.js 파일을 open 하신 후 코드를 보시면

479번째 라인쯤에 callFileUploader 함수가 있습니다.

이 함수가 싱글 파일업로드를 처리하는 함수입니다.

 

- 소스 변경전

sUrl  : location.href.replace(/\/[^\/]*$/, '') + '/file_uploader.php',  //샘플 URL입니다.

sCallback : location.href.replace(/\/[^\/]*$/, '') + '/callback.html',  //업로드 이후에 iframe이 redirect될 콜백페이지의 주소

 

- 변경 후

sUrl : 'file_uploader.jsp',   //변경 URL입니다.

 

sCallback : '/SE2/sample/photo_uploader/callback.html',  //업로드 이후에 iframe이 redirect될 콜백페이지의 주소

 

* file_uploader.jsp 파일업로드 샘플코드

 

<%--------------------------------------------------------------------------------
	* 화면명 : Smart Editor 2.8 에디터 - 싱글 파일 업로드 처리
	* 파일명 : /SE2/sample/photo_uploader/file_uploader.jsp
--------------------------------------------------------------------------------%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.UUID"%>
<%@ page import="java.io.File"%>
<%@ page import="java.io.FileOutputStream"%>
<%@ page import="java.io.InputStream"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
	// 로컬경로에 파일 저장하기 ============================================
	String return1 = "";
	String return2 = "";
	String return3 = "";
	String name = "";

	// multipart로 전송되었는가 체크
	if(ServletFileUpload.isMultipartContent(request)) {
		ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());

		// UTF-8 인코딩 설정
		uploadHandler.setHeaderEncoding("UTF-8");

		List items = uploadHandler.parseRequest(request);

		// 각 필드태그들을 FOR문을 이용하여 비교를 합니다.
		for(FileItem item : items) {
			if(item.getFieldName().equals("callback")) {
				return1 = item.getString("UTF-8");
			} else if(item.getFieldName().equals("callback_func")) {
				return2 = "?callback_func="+item.getString("UTF-8");
			} else if(item.getFieldName().equals("Filedata")) {
				// FILE 태그가 1개이상일 경우
				if(item.getSize() > 0) {
					// 확장자
					String ext = item.getName().substring(item.getName().lastIndexOf(".")+1);

					// 파일 기본경로
					String defaultPath = request.getServletContext().getRealPath("/");

					// 파일 기본경로 _ 상세경로
					String path = defaultPath + "upload" + File.separator;

					File file = new File(path);

					// 디렉토리 존재하지 않을경우 디렉토리 생성
					if(!file.exists()) {
						file.mkdirs();
					}

					// 서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
					String realname = UUID.randomUUID().toString() + "." + ext;

					///////////////// 서버에 파일쓰기 ///////////////// 
					InputStream is = item.getInputStream();
					OutputStream os=new FileOutputStream(path + realname);
					int numRead;
					byte b[] = new byte[(int)item.getSize()];

					while((numRead = is.read(b,0,b.length)) != -1) {
						os.write(b,0,numRead);
					}

					if(is != null)  is.close();

					os.flush();
					os.close();

					System.out.println("path : "+path);
					System.out.println("realname : "+realname);

					// 파일 삭제
//					File f1 = new File(path, realname);
//					if (!f1.isDirectory()) {
//						if(!f1.delete()) {
//							System.out.println("File 삭제 오류!");
//						}
//					}

					///////////////// 서버에 파일쓰기 /////////////////
					return3 += "&bNewLine=true&sFileName="+name+"&sFileURL=/upload/"+realname;
				} else {
					return3 += "&errstr=error";
				}
			}
		}
	}

	response.sendRedirect(return1+return2+return3);
	// ./로컬경로에 파일 저장하기 ============================================
%>

 

[다중 업로드 설정]

 

attach_photo.js파일에 약 333라인에 html5Upload 함수가 존재합니다.

sUploadURL= 'file_uploader_html5.php';  //upload URL

위 변수의 값을 본인이 작성하고자 하는 페이지명으로 정의해주시면 됩니다.

저같은 경우는 sUploadURL= 'file_uploader_html5.jsp';  //upload URL

위와 같이 값을 변경해주었습니다.

그럼 변경한 sUploadURL 변수에 대입한 페이지 URL에 대한 파일에 코드를 적용해보도록 하겠습니다.

 

* file_uploader_html5.jsp 다중파일 업로드 샘플코드

 

<%--------------------------------------------------------------------------------
	* 화면명 : Smart Editor 2.8 에디터 - 다중 파일 업로드 처리
	* 파일명 : /SE2/sample/photo_uploader/file_uploader_html5.jsp
--------------------------------------------------------------------------------%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.UUID"%>
<%@ page import="java.io.File"%>
<%@ page import="java.io.FileOutputStream"%>
<%@ page import="java.io.InputStream"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
	// 로컬경로에 파일 저장하기 ============================================
	String sFileInfo = "";

	// 파일명 - 싱글파일업로드와 다르게 멀티파일업로드는 HEADER로 넘어옴 
	String name = request.getHeader("file-name");

	// 확장자
	String ext = name.substring(name.lastIndexOf(".")+1);

	// 파일 기본경로
	String defaultPath = request.getServletContext().getRealPath("/");

	// 파일 기본경로 _ 상세경로
	String path = defaultPath + "upload" + File.separator;

	File file = new File(path);
	if(!file.exists()) {
		file.mkdirs();
	}

	String realname = UUID.randomUUID().toString() + "." + ext;
	InputStream is = request.getInputStream();
	OutputStream os = new FileOutputStream(path + realname);
	int numRead;

	// 파일쓰기
	byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
	while((numRead = is.read(b,0,b.length)) != -1) {
		os.write(b,0,numRead);
	}

	if(is != null) {
		is.close();
	}

	os.flush();
	os.close();

	System.out.println("path : "+path);
	System.out.println("realname : "+realname);

	// 파일 삭제
// 	File f1 = new File(path, realname);
// 	if (!f1.isDirectory()) {
// 		if(!f1.delete()) {
// 			System.out.println("File 삭제 오류!");
// 		}
// 	}

	sFileInfo += "&bNewLine=true&sFileName="+ name+"&sFileURL="+"/upload/"+realname;
	out.println(sFileInfo);

	// ./로컬경로에 파일 저장하기 ============================================
%>

 

[프로젝트 파일 첨부]

 

SmartEditor2.8_project.zip