네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자

보통 웹개발을 할때 주로 네이버의 스마트 에디터 또는 다음의 다음에디터를 연동한다.

현재까지 100%에 대한 웹접근성 지원은 아닌거 같다... -0-;;

그럼, 네이버에서 제공해주는 스마트 에디터 연동법에 대하여 설명을 진행하도록 하겠음

1. 우선 연동할 에디터를 다운로드 받도록 하자

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

뭐 아무거나 받아도 상관없으나 본인은 최신버전으로 다운받도록 하겠다

현재까지 나온 버전은 2.3.10.11329 버전이다.

클릭하면 버그 수정내용 및 업데이트에 대한 내용이 존재한다.

그리고 다운로드 버튼이 존재하는데 클릭하여 다운을 받도록 하자

압축해제를 하면 파일들을 전부다 프로젝트 내에 넣도록 해보자

구조는 다음과 같고 SmartEditor2.html만 호출하더라도 샘플 화면은 출력이 된다.

위 구조에서 게시판 글쓰기 화면에 에디터를 적용한다 가정하고 jsp페이지 하나를 만들어 보도록

하겠다. 본인은 write.jsp 라고 생성하였음

방금 프로젝트에 추가한 스마트 에디터 폴더및 소스들을 모두 editor 폴더내에 넣었음

변경된 전체 폴더 구조

우선 기본구조 태그

	
<form id="frm" action="/insert.jsp" method="post" >
<table width="100%">
		<tr>
			<td>제목</td>
			<td><input type="text" id="title" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td>
				<textarea rows="10" cols="30" id="ir1" name="content" style="width:766px; height:412px; "></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" id="save" value="저장"/>
				<input type="button" value="취소"/>
			</td>
		</tr>
</table>
</form>

뭐전문적으로 화면을 구성할것이 아니라 대충 table 태그로 구조 뚝딱뚝딱

화면출력해보자

음~ 볼품없다...

어쨋든, 내용에 해당하는 textarea 태그에 에디터를 씌우는 작업을 진행 하도록 하겠음

1. 필요파일 include

<script type="text/javascript" src="/editor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>

<head></head> 태그안에 위와같이 선언을 해주고 textarea태그 바로 밑에 다음과 같이

스크립트코드를 추가함 어짜피 기본 샘플링을 토대로 만든것

본인은 body태그내에 특별하지 않는이상 스크립트 코드를 잘 넣지 않으려고 한다.

그래서 onload시 에디터생성 함수를 호출하였다.

<script type="text/javascript">
var oEditors = [];
$(function(){
					nhn.husky.EZCreator.createInIFrame({
						oAppRef: oEditors,
						elPlaceHolder: "ir1",
						//SmartEditor2Skin.html 파일이 존재하는 경로
						sSkinURI: "/editor/SmartEditor2Skin.html",	
						htParams : {
							// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
							bUseToolbar : true,				
							// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
							bUseVerticalResizer : true,		
							// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
							bUseModeChanger : true,			
							fOnBeforeUnload : function(){
								
							}
						}, 
						fOnAppLoad : function(){
							//기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
							oEditors.getById["ir1"].exec("PASTE_HTML", ["기존 DB에 저장된 내용을 에디터에 적용할 문구"]);
						},
						fCreator: "createSEditor2"
					});
});
</script>

위와같이 작성을 해주었다.

연동된 화면

에디터는 우선 나왔고~~

신규 글쓰기시에는 별 필요 없지만 마냥 내용 수정 화면에 에디터를 쓸경우 필요한 함수는 fOnAppLoad 함수이다.

마지막으로 저장버튼 클릭시 서버로 제목과 내용의 입력값들을 서버에 넘겨 주어야 하는데

현재 상황에서는 에디터에 껍데기만 씌워진 상태라 서버에서 각각의 값을 받게 된다면 제목값만

받게 될것이다.

해당 코드는 저장버튼 클릭시 form submit 하는 단순 코드이다.

$("#save").click(function(){
	oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
	$("#frm").submit();
})

이어서 데이터들을 받을 insert.jsp 페이지를 생성하고

title / content 에 대한 값을 콘솔에 찍어보도록 하겠다

- insert.jsp

//제대로 utf-8환경이 아니라 한글 깨짐 그래서 임의로 추가
request.setCharacterEncoding("utf-8");
System.out.println("제목:"+request.getParameter("title"));
System.out.println("내용:"+request.getParameter("content"));

폼화면에서 제목/내용 입력후 서버 전송한 결과값을 서버 콘솔에서 확인한 결과값이다.

잘나왔도다~

다음시간에는 에디터내에 파일첨부 관련에 대하여 다루어 볼까 생각중이다..

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

저작자표시

'에디터연동 > NAVER-스마트에디터' 카테고리의 다른 글

Spring3을 이용한 스마트에디터(smarteditor) 이미지업로드(+html5) 적용하기 (50)	2014.09.21
한페이지에 스마트에디터 여러개 띄우고 각각 이미지 첨부하기 (2)	2014.08.20
스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기 - JAVA/JSP 버전 (73)	2014.07.25

'에디터연동 > NAVER-스마트에디터' 카테고리의 다른 글

티스토리툴바