[SPRING] 네이버 스마트에디터2를 이용해서 이미지 업로드하기

텍스트 편집도구들 중 CKEditor를 주로 사용하는 편이다. 예전부터 꾸준히 CKEditor를 이용해서 많은 개발도 하고 익숙하게 사용해서 그런지 CKEditor를 적용하고 사용하는게 제일 편했다. 그러다 문득 네이버 스마트에디터2를 적용해서 사용해보자는 마음이 생겨 적용해보았다.

 

 

 

 

 

네이버 스마트에디터2 적용하기

---

SmartEditor2에서 이전 버전에 비해 개선된 기능과 추가된 기능은 다음과 같다.

 

개선된 기능

• UI 디자인 개선
  글꼴, 글자 크기, 줄 간격 등을 설정하는 UI를 기존의 드롭다운 메뉴에서 레이어로 변경하여 디자인이 개선되었다.
• 글자 색과 글자 배경 색
  기존의 기본 색상표 이외에 다양한 색상을 선택할 수 있는 컬러 팔레트를 제공한다.
• 줄 간격
  줄 간격 값을 직접 입력할 수 있다.
• 인용구
  인용구 스타일이 기존의 7가지에서 10가지로 늘어났다.
• 표
  표를 삽입할 때 기존에는 테두리 색상과 두께만 설정할 수 있었지만 SmartEditor2 버전에서는 테두리 스타일을 설정할 수 있으며, 쉽게 표를 꾸밀 수 있도록 표 스타일을 제공한다.

추가된 기능

• 표 간단 편집기
  표 편집 기능을 제공하여 표를 삽입한 후에도 스타일을 편집할 수 있다.
• TEXT 모드
  Editor모드(WYSIWYG)와 HTML모드 외에 TEXT모드를 추가하여 단순 텍스트만으로 간단하게 본문의 내용을 작성할 수 있다. 표 편집 기능을 제공하여 표를 삽입한 후에도 스타일을 편집할 수 있다.

지원 브라우저

 

일부 브라우저는 SmartEditor2을 지원하지 않거나 일부 기능만을 지원한다. 지원하는 기능은 브라우저 특성에 따라 다를 수 있다. 운영체제별로 SmartEditor2의 모든 기능을 지원하는 브라우저는 다음과 같다.

 

설치 전 확인사항

 

• HTML DOCTYPE
  SmartEditor2는 HTML Traditional 4.01만 지원하며, Internet Explorer 8.0 이상에서는 Internet Explorer 7.0 호환 모드로 열린다.
• 파일 인코딩
  SmartEditor2에서 제공하는 JavaScript, CSS, HTML 코드는 모두 UTF-8 BOM(Byte Order Mark)으로 인코딩되었다.

 

 

1.  네이버 스마트에디터2 Githup 페이지에 접속한다.

 

네이버 스마트에디터2 Githup

네이버 스마트 에디터2를 다운로드 하기 위해서 Githup에 네이버 > 스마트에디터2 페이지로 접속한다. 네이버 스마트에디터는 원래 네이버 디벨로퍼스에서 관리하고 배포했다. 당연히 이슈도 마찬가지였다. 하지만, 이제는 Githup에서 네이버 스마트에디터2 버전별 배포파일을 관리하고 이슈도 깃헙에서 관리한다.

 

 

 

 

 

2.  필요한 버전을 선택 후, 스마트 에디터 압축 파일을 다운로드 한다.

 

네이버 스마트에디터2 Githup Release

네이버 스마트에디터2 원하는 버전 zip파일 다운로드

깃헙에서 네이버 스마트 에디터2 릴리즈로 오게되면 많은 버전의 스마트 에디터2 로그와 배포파일을 확인할 수 있다. 여기서 알고 가야할 부분이 있다. 네이버 스마트에디터2 버전 2.9.0 ~ 2.10.0 배포 파일엔 이미지 업로드가 빠져있었다. 이 점 꼭 참고하시고 다운로드 받으면 될 것 같다. 그래서 이미지 업로드가 포함되어있는 버전 2.8.2.3 배포 파일 zip을 다운로드 받았다.

 

 

네이버 스마트에디터2 사용자 가이드

 

지금부터는 네이버 스마트에디터2 사용자 가이드를 참고하여 네이버 스마트에디터2 버전 2.8.2.3을 설치하고 적용하였다. 적용하는데 필요한 분들은 위 링크를 클릭해 참고하길 바란다.

 

 

 

 

 

3.  다운로드 받은 zip파일의 압축을 푼다.

 

네이버 스마트에디터2 버전 2.8.2.3 파일 압축해제

다운받은 네이버 스마트에디터2 버전 2.8.2.3 파일을 압축해제하면 위와같은 파일구조가 나온다. 이미지 업로드에 필요한 js와 html은 sample폴더에 존재한다.

 

 

 

 

 

4.  압축을 푼 폴더 그대로 webapp 아래에 붙여넣고 폴더 이름을 smarteditor2로 변경한다.

 

네이버 스마트에디터2 폴더 붙여넣기

압축을 푼 폴더를 복사해서 이클립스 프로젝트안에 webapp바로 아래에 붙여넣고 기존 smarteditor2-2.8.2.3으로 되어 있는 파일명을 smarteditor2로 변경한다. 변경하지 않고 그대로 진행해도 무방하다. 경로를 설정할때 파일명이 길거나 복잡하면 소스가 길어지거나 지저분해지므로 짧게 변경했다.

 

 

 

 

 

5.  HuskyEZCreator.js를 추가한다.

 

네이버 스마트에디터2 js 추가

head태그 안에 HuskyEZCreator.js 스크립트를 추가한다.

 

<script type="text/javascript" src="/smarteditor2/js/HuskyEZCreator.js" charset="utf-8"></script>

 

 

 

 

 

6.  스마트에디터2를 적용할 등록 페이지에 textarea와 스크립트를 추가한다.

 

textarea 추가

네이버 스마트에디터2 스크립트 추가

form 페이지에 textarea를 추가해 내용을 입력할 수 있는 html코드를 추가해준다. 이때, name과 id값을 같은 값으로 준다. 그리고 스크립트에 nhn.husky.EZCreator.createInIFrame()을 선언한다.

 

<textarea class="form-control" rows="20" name="bo_content" id="bo_content"></textarea>

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({
  oAppRef : oEditors,
  elPlaceHolder : "bo_content",
  sSkinURI : "/smarteditor2/SmartEditor2Skin.html",
  fCreator : "createSEditor2"
});

 

 

 

 

 

7.  스마트에디터2가 잘 적용되는지 확인한다.

 

네이버 스마트에디터2 적용

네이버 스마트에디터2가 잘 적용되었다. 네이버 스마트에디터 사용자 가이드에서 안내해주는 제공기능상세 메뉴들이 들어있고 오른쪽 상단에 사진이라는 메뉴도 잘 보인다. 그리고 하단에는 입력창 크기조절과 Editor, HTML, TEXT를 선택해 편집할 수 있는 메뉴도 보인다. 왼쪽 상단에 버전이라는 텍스트가 보이는데 이 부분은 SmartEditor2Skin.html에서 제거해주면 없어지므로 수정하면 된다.

 

※ 스마트에디터2를 적용한 게시판 등록폼에서 게시글 입력 시, 추가사항

 

게시판 Form페이지에서 textarea에 입력한 내용을 입력 후 게시글을 등록하려고하면 등록이 되질 않는다. 일반적으로 form태그안에 들어있는 input요소들의 name값을 통해 submit되어진 데이터들을 서버에서 처리해 게시글을 등록하는데 이때 textarea를 처리하는 방법이 따로 있다. 게시판 등록 페이지인 form에서 등록 버튼을 눌러 등록하려는 이벤트 내에 아래와 같은 javascript code를 추가해야한다.  

oEditors.getById["bo_content"].exec("UPDATE_CONTENTS_FIELD",[]);

 

 

 

 

 

 

네이버 스마트에디터2 이미지 업로드하기

---

 

사진 퀵 업로더는 SmartEditor2를 이용하여 글을 작성할 때 사진을 쉽고 빠르게 업로드할 수 있는 팝업 UI와 에디터 플러그인을 제공한다. 에디터의 팝업 관련 코드뿐만 아니라 파일을 업로드하는 서버 작업도 구현해야 한다. 팝업 UI에서 서비스와 연결되는 방법은 이 문서에서 다루지 않는다. 사용자 브라우저의 HTML5 지원 여부에 따라 다음 두 가지의 UI가 사용된다.

 

네이버 스마트에디터2 이미지 업로드 popup

HTML5 지원 브라우저

 

HTML5를 지원하는 브라우저에서는 한 장 이상의 사진을 끌어다 지정된 영역에 놓으면 사진이 첨부된다. HTML5 지원 브라우저의 사진 퀵 업로더는 HTML5의 드래그 앤드 드롭과 File API를 사용한다. 2012년 12월을 기준으로 Internet Explorer 10 이상 버전, Firefox 15 이상 버전, Chrome 22 이상 버전, Safari 5.1 이상 버전이 HTML5의 드래그 앤드 드롭과 File API를 지원한다.

 

HTML5 미지원 브라우저

 

HTML5를 지원하지 않는 브라우저에서는 한 번에 한 장의 사진만 업로드할 수 있다. 페이지를 전환하지 않고 사진을 업로드할 수 있으며, 바로 성공 여부를 알려준다. HTML5 미지원 브라우저의 사진 퀵 업로더는 NAVER에서 제작된 JavaScript 라이브러리인 Jindo의 FileUploader를 이용하여 제작한 컴포넌트이다.

 

 

 

 

 

1.  attach_photo.js 를 수정한다.

 

sample/photo_uploader/attach_photo.js파일을 연다. attach_photo.js안에 있는 callFileUploader()와 html5Upload() 함수를 수정해야한다. callFileUploader()는 싱글 이미지 업로드 팝업창으로 이미지를 업로드할 때 사용되고, html5Upload()는 멀티 이미지 업로드 팝업창으로 이미지를 업로드할 때 사용된다.

 

callFileUploader() 수정

 

callFileUploader() 수정

sUrl  : '/singleImageUploader.do',
sCallback : '/smarteditor2/sample/photo_uploader/callback.html'

 

callFileUploader()의 sUrl, sCallback 경로를 수정한다. sUrl은 php경로로 되어 있는 부분을 컨트롤러단에서 처리할 수 있는 경로를 넣는다. 그리고 sCallback 경로로는 smarteditor2/sample/photo_uploader/callback.html의 경로를 지정한다.

 

html5Upload() 수정

 

html5Upload() 수정

 

sUploadURL= '/multiImageUploader.do';

html5Upload()의 sUploadURL 경로를 수정한다. sUploadURL의 경로는 컨트롤러단에서 처리할 수 있는 경로를 넣는다.

 

 

 

 

싱글 이미지 업로드

---

 

2.  싱글 이미지 업로드를 했을때 받을 VO를 만든다.

 

@Data
public class SmarteditorVO {
	private MultipartFile filedata;
	private String callback;
	private String callback_func;
}

VO를 좀더 편하게 만들기 위해서 lombok을 활용해 만들었다.

 

 

 

 

 

3.  싱글 이미지 업로드 컨트롤러를 만든다.

 

@RequestMapping(value="/singleImageUploader.do")
	public String simpleImageUploader(
		HttpServletRequest req, SmarteditorVO smarteditorVO) 
        	throws UnsupportedEncodingException{
	String callback = smarteditorVO.getCallback();
	String callback_func = smarteditorVO.getCallback_func();
	String file_result = "";
	String result = "";
	MultipartFile multiFile = smarteditorVO.getFiledata();
	try{
		if(multiFile != null && multiFile.getSize() > 0 && 
        		StringUtils.isNotBlank(multiFile.getName())){
			if(multiFile.getContentType().toLowerCase().startsWith("image/")){
            	String oriName = multiFile.getName();
                String uploadPath = req.getServletContext().getRealPath("/img");
                String path = uploadPath + "/smarteditor/";
                File file = new File(path);
                if(!file.exists()){
                file.mkdirs();
                }
                String fileName = UUID.randomUUID().toString();
                smarteditorVO.getFiledata().transferTo(new File(path + fileName));
                file_result += "&bNewLine=true&sFileName=" + oriName + 
                			   "&sFileURL=/img/smarteditor/" + fileName;
			}else{
				file_result += "&errstr=error";
			}
		}else{
			file_result += "&errstr=error";
		}
	} catch (Exception e){
		e.printStackTrace();
	}
	result = "redirect:" + callback + 
			 "?callback_func=" + URLEncoder.encode(callback_func,"UTF-8") + file_result;
	return result;
}

컨트롤러에서 설정한 경로가 callFileUploader()에서 sUrl과 동일하다. 단일 이미지 업로드시 simpleImageUploader()가 실행된다. 

 

 

 

 

 

4.  네이버 스마트에디터2로 이미지를 업로드해본다.

 

네이버 스마트에디터2 싱글 이미지 업로드

네이버 스마트에디터2 싱글 이미지 업로드

네이버 스마트에디터2 싱글 이미지 업로드를 위해서 파일선택으로 업로드 할 이미지를 선택한다. 확인버튼을 눌러 서버로 요청하면 컨트롤러에서 처리된 후 리턴으로 "redirect:/[callback경로]?callback_func=[callback_func 파라메터]"를 결과로 뱉는다.

 

 

 

 

 

멀티 이미지 업로드

---

 

5.  멀티 이미지 업로드 JSP를 만든다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.UUID"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%
    String fileInfo = "";
    String fileName = request.getHeader("file-name");
    String fileName_suffix = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
    String[] suffixArr = { "jpg", "png", "bmp", "gif" };
 
    int cnt = 0;
    for (int i = 0; i < suffixArr.length; i++) {
        if (fileName_suffix.equals(suffixArr[i])) {
            cnt++;
        }
    }
 
    if (cnt == 0) {
        out.println("NOTALLOW_" + fileName);
    } else {
        String defaultPath = request.getSession().getServletContext().getRealPath("/");
        String filePath = defaultPath + "img" + File.separator + "smarteditor2" + 
        					File.separator;
        File file = new File(filePath);
        if (!file.exists()) {
            file.mkdirs();
        }
        String autoFileName = UUID.randomUUID().toString() + 
        						fileName.substring(fileName.lastIndexOf("."));
        String rFileName = filePath + autoFileName;
        InputStream is = request.getInputStream();
        OutputStream os = new FileOutputStream(rFileName);
        int num;
        byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
        while ((num = is.read(b, 0, b.length)) != -1) {
            os.write(b, 0, num);
        }
        if (is != null) {
            is.close();
        }
        os.flush();
        os.close();
 
        fileInfo += "&bNewLine=true";    
        fileInfo += "&sFileName=" + fileName;    
        fileInfo += "&sFileURL=/img/smarteditor2/"+autoFileName;
        out.println(fileInfo);
    }
%>

멀티 이미지 업로드도 컨트롤러 단에서 HttpServletRequest 객체에 담겨온 inputStream()의 값으로 파일 객체를 만들어 파일 경로를 가져와 네이버 스마트에디터에 뿌려주려 하였으나, HttpServletRequest 객체에 담겨온 이미지 파일의 데이터를 꺼내올수 없어 while문을 돌려 OutputStream으로 내보낸 파일에 데이터를 쓸 수 없었다. 그래서 jsp를 만들고 jsp에서 동일한 소스를 구현하고 돌려보니 request에서 파일을 읽어올 수 있고, 바깥으로 내보낸 파일객체에 데이터를 쓸 수 있었다. 멀티 이미지 업로드 같은 경우는 컨트롤러에서 처리할 수 없다는 부분이 여러가지면에서 의문이 남는게 많지만, 추후 왜 안되는지? 어떤 부분이 잘 못되어 적용이 되지 않았던건지? 에대한 부분을 찾아보고 연구해서 추후 업데이트 할 예정이다.

 

jsp파일은 "multiImageUploader"명의 jsp파일을 만들어 webapp/smarteditor2/경로 안에 넣어주었다. WEB-INF경로 안으로 넣게되면 직접 유입은 불가능하므로 webapp안에서 넣어준다. 

 

 

 

 

 

 

6.  네이버 스마트에디터2로 여러장의 이미지를 업로드해본다.

 

네이버 스마트에디터2 멀티 이미지 업로드

네이버 스마트에디터2 멀티이미지 업로드

 

 

 

 

 

---

네이버 스마트에디터2 적용하면서 멀티 이미지 업로드 부분에서 정말 많은 시도와 많은 수정이 있었던것 같다. 컨트롤러에서 request객체에 넘어오는 모든 속성값들을 일일이 찾아보기도하고, 넘어온 데이터를 받아볼수 있는 인자가 있지는 않을까해서 모든 가능성을 열고 일일이 값을 찎어보기도 했지만, 실패도 돌아갔다. 그래서 결국은 jsp페이지로 만들어 out객체로 뿌려주어 멀티 이미지 업로드 부분을 마무리했다. java 단에서 파일을 다루기는 언제해도 거부감이 먼저 들곤 한다. 그렇지만, 파일을 다루면서 여러가지 시도도 하고 만들고 싶은 것에 서서히 다다를때 기쁨은 배가 되는것 같다. 

부족한 실력이지만, 네이버 스마트 에디터2를 이용해 이미지 업로드를 구현하려 하는 분들께 조금이나마 도움이 됬으면 한다. 작성자 글을 보고 수정이 필요하거나 조언을 아끼지 않아도 좋다. 감사합니다.