[jsp] 게시판에 네이버 스마트 에디터 적용하기

다음이나 네이버에서 개발한 에디터를 배포하고 있어서 많은 사이트에서 적용이 되고 있는데요.

jsp 형식의 게시판 페이지에 네이버 스마트 에디터를 적용하는 방법을 정리해보겠습니다.

먼저 네이버 개발자센터에서 스마트 에디터를 다운받습니다.

네이버 개발자 센터 스마트에디터 프로젝트 페이지 : http://dev.naver.com/projects/smarteditor/

2.1.3버전 다운로드 페이지 : http://dev.naver.com/projects/smarteditor/download/note/3713

2.0버전 개발자 가이드 : http://dev.naver.com/projects/smarteditor/download/note/3575

다운로드를 받으셨다면 웹서버의 적당한 디렉토리에 구성요소들을 넣어줍니다.

그리고나서 jsp 페이지 혹 html 페이지에서 아래 소스를 추가해줍니다.

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

위에서 붉은색으로 표시해둔 경로는 웹서버에 저장하셨던 디렉토리 경로를 기준으로 수정해주셔야 합니다.

다음은 웹문서의 body 부분에 textarea를 추가해줍니다.

<textarea name="content" id="content" rows="22" style="width:645px;> </textarea>

게시판의 테이블 태그 사이에 글 입력폼이 들어갈 곳에 넣으시면 되겠습니다. name이나 id값은 원하는 이름으로 지정하시면 됩니다.

그리고 마지막으로 아래 스크립트를 textarea 아래에 추가해주시면 됩니다.

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef: oEditors,

elPlaceHolder: "content", //textarea에서 지정한 id와 일치해야 합니다.

sSkinURI: "${contextPath}/smarteditor/SmartEditor2Skin.html",

fCreator: "createSEditor2"

});

</script>

물론 여기서도 붉게 표시해둔 경로를 웹서버에 저장하셨던 디렉토리 경로를 기준으로 수정하셔야 합니다.

이렇게 적용하고나면 아래와 같이 스마트 에디터가 나타납니다.