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

이번 포스팅은 대표적으로 자주 이용하는 무료 웹에디터 툴중에 하나인 

네이버 스마트에디터에 대한 기본 연동법에 대하여 포스팅 하고자 합니다.

제일먼저 에디터파일을 받도록 합니다.

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

사이트 접속시 다음과 같이 버전별 에디터 목록이 나옵니다

저같은 경우는 제일 최신으로 등록된 버전을 기준으로 진행을 하겠습니다.

목록을 클릭하여 들어가시면 상단에 다운로드버튼이 존재하는데 

클릭하여 파일을 다운로드 받도록 합니다.

저는 포스팅 날짜기준 "SE2.3.10.O11329.zip" 파일을 다운받았습니다.

압축해제 후 다음 파일들을 모두 본인의 프로젝트에 맞추어 include해줍니다.

저는 개인적으로 별도의 "smarteditor" 디렉토리 생성하여 해당 폴더에 통째로 붙여넣기 하였습니다.

스마트 에디터를 적용하기 위해서는 HTML의 textarea 태그가 필요합니다.

index.html 파일에 하단 코드 작성하였습니다.

INCLUDE 파일

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

에디터 샘플 html 코드

<form action="/send.jsp" method="post" id="frm">
	<textarea name="smarteditor" id="smarteditor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
	<input type="button" id="savebutton" value="서버전송" />
</form>

에디터 관련 스크립트 코드

$(function(){
	//전역변수선언
	var editor_object = [];
	
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: editor_object,
		elPlaceHolder: "smarteditor",
		sSkinURI: "/smarteditor/SmartEditor2Skin.html",	
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,				
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true,	
		}
	});
	
	//전송버튼 클릭이벤트
	$("#savebutton").click(function(){
		//id가 smarteditor인 textarea에 에디터에서 대입
		editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);
		
		// 이부분에 에디터 validation 검증
		
		//폼 submit
		$("#frm").submit();
	})
})

위 코드를 차례대로 보시겠습니다.

smarteditor 연동 제공해주는 HuskyEZCreator.js 파일과 jQuery CDN을 이용한 예제입니다.

1. nhn.husky.EZCreator.createInIFrame 명령어를 이용하여 에디터를 iframe을 이용하여 화면에 띄워줍니다.

2. textarea와 패키지개념이긴 하나 실질적으로 별개의 프레임입니다.

    elPlaceHolder 속성값에는 연결지을 textarea의 id명을 정해줍니다.

    sSkinURI 속성값에는 에디터스킨 html파일 경로를 지정해줍니다

3. 마지막으로 전송버튼시 editor_object라는 배열변수를 이용하여 smarteditor id값을 가진 textarea폼에 에디터스킨에서 입력한 html내용들을 대입시킵니다.

    editor_objet 변수를 전역변수로 선언한 이유는 이와같이 클립이벤트 공통으로 에디터객체 핸들링을 위하여 선언하였습니다.

위 3가지에 대한 부분이 주요 설명입니다.

그리고 form submit을 할때 정해준 action url페이지인 send.jsp 페이지내에 코드는 다음과 같습니다.

send.jsp 코드

//한글 인코딩을 위한 UTF-8 설정
request.setCharacterEncoding("utf-8");
out.println("에디터 결과");	
out.println(request.getParameter("smarteditor"));

에디터 로딩 페이지와 전송된 갑이 올바르게 넘어가는지 해당 소스를 실행해보도록 하겠습니다.

최초 로드 화면

send.jsp 전송값 확인

화면상 내용만 출력되었지만 소스보기 결과 정상적으로 에디터에 작성된 태그가 적용된것을 확인 할 수 있었습니다.

by 개발로짜