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

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

 

http://naver.github.io/smarteditor2/user_guide/2_install/download.html

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

다운로드

 

 

 

[Reference]

 

* 네이버 스마트에디터 기본 연동법 및 서버에 입력 값 전송하기

http://hellogk.tistory.com/62

 

* 네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함

http://hellogk.tistory.com/63