[JAVA 개발] 네이버에디터(스마트에디터) 연동 SmartEditor

네이버 에디터를 연동하기전 에디터를 먼저 다운로드 받아야 합니다.

네이버에서 제공하는 스마트에디터를 다운로드 해보도록 하겠습니다.

스마트에디터 다운로드 URL : http://dev.naver.com/projects/smarteditor/download

무엇을 받아도 상관은 없지만 저는 최신버전을 다운로드 하도록 하겠습니다.

버전은 2.3.10.11329 입니다. 

 클릭하게되면 버그 수정내용 및 업데이트에 대한 내용이 기재되어 있습니다.

다운로드를 해주시면 됩니다.

다운로드후 압축을 해지하여 들어가보면 여러 폴더들이 존재합니다. 

존재하는 모든 폴더를 이클립스 자신이 지정해놓은 곳으로 이동시킵니다.

저는 resources/navereditor/에 저장했습니다. 

이제 기본 세팅은 모두 끝났습니다. 먼저 Controller에 navereditor로 폼을 생성하도록 합니다.

@RequestMapping("/navereditor")
	public String navereditor(){
		
		return "navereditor";
	}

다음으로는 navereditor.jsp에서 기본 폼을 작성하도록 하겠습니다.

먼저 body에 입력될 소스 입니다.

필요한 스크립트 파일을 include 하겠습니다.

여기서 HuskyEZCreator.js는 좀전에 복사했던 경로를 확인하여 자신의 경로로 변경해 주셔야 합니다.

다음은 스크립트 코드 작성을 해보겠습니다.

여기서 elPlaceHolder : "textarea 에서 ID값", 을 입력해주시면 됩니다.

그리고 하단부분도 마찬가지로 oEditors.getById["textarea 의 ID값"]을 입력해 주시면 됩니다.

sSkinURI : "자신이 복사해 넣었던 경로를 확인해 SmartEditor2Skin.html 경로입력", 을 입력해주시면 됩니다.

서버를 실행하여 해당 페이지를 확인해 보겠습니다. 

에디터가 정상적으로 적용되었습니다.

이제 send페이지를 생성하여 글작성후 저장버튼을 클릭하였을때 값이 정상적으로 넘어가는지 확인해보겠습니다.

저장버튼 을 클릭하면 ID 값인 savebutton값을 통해 스크립트로 전달되어 클릭이벤트 처리가 이루어집니다.

//전송버튼 클릭이벤트
	    $("#savebutton").click(function(){
	        //id가 editor인 textarea에 에디터에서 대입
	        editor_object.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);
	         
	        // 이부분에 에디터 validation 검증
	         
	        //폼 submit
	        $("#frm").submit();
	    });

데이터들을 받을 send.jsp페이지를 생성하기 위해Controller를 작성해 줍니다.

해당 페이지를 생성하지 않고 콘솔창을 통해 값을 받아보도록 하겠습니다.

send페이지를 Controller에 작성해 줍니다.

@RequestMapping("/send")
	public void send(HttpServletRequest request) throws UnsupportedEncodingException{
		request.setCharacterEncoding("utf-8");
		System.out.println(request.getParameter("editor"));
	}

navereditor.jsp 페이지에서 글을 작성후 콘솔창을 확인해보도록 하겠습니다.

send페이지는 void로 리턴값을 주지 않았기 때문에 404error가 발생합니다.

콘솔에 정상적인 값만 확인하면 됩니다. 

정상적으로 입력한 값이 출력되었습니다.

감사합니다^^