티스토리 뷰

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


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>

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

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






댓글
  • 프로필사진 하나마나 하나여쭤보고싶은게있는데요 image같은거 db에 저장하고싶을땐 어덯게하는겁니까?. 2012.11.05 18:46
  • 프로필사진 BlogIcon 권태성 보통은 이미지를 DB에 담는것이 아니라 이미지의 저장경로를 DB에 담습니다.
    그리고 모듈에서는 DB에 있는 경로를 통해 이미지를 가져오게 되는것이죠 ^^
    2012.11.07 22:01 신고
  • 프로필사진 초보개발자 안녕하세요.
    저도 하나 여쭤보고싶은게있는데..
    이미지부분은 어떻게 처리를 해야하는지.. 궁금합니다.. Multipartrequest를 어떻게 요리를 해야할지 감이 안잡힙니다..ㅠㅠ
    2013.04.02 21:41
  • 프로필사진 BlogIcon 권태성 어떤게 의문이신지 정확히 알수가없어 간단하게 방법을 알려드리자면
    http://tskwon.tistory.com/271
    이 포스팅 참조하셔서 multipartfile 형식으로 컨트롤러에 전달하시면 됩니다.
    2013.04.03 15:56 신고
  • 프로필사진 Jabez 확인 하고 취소 버튼 스크립트도 좀 볼 수 있을까요? 2013.08.03 17:41
  • 프로필사진 BlogIcon 권태성 제가 따로 보여드릴 스크립트는 없네요.. 다만 submit 하실때 주의 하실건 에디터에서 작성한 내용을 textarea로 반영하는 스크립트가 추가되어야 하는데 이건 개발자 가이드에 나와있으니 참고하세요 ^^
    (스크립트가 궁금하시면 데모 페이지에서 소스 보기 하시면 됩니다.)
    2013.08.14 11:14 신고
  • 프로필사진 스마트에디터 질문이 있습니다. jsp 형식의 스마트에디터 적용이면 jsp 파일에서만 가능하다는건가요? html파일에는 적용이 불가능한가요? 2014.11.28 10:04
  • 프로필사진 BlogIcon 권태성 JSP도 화면을 구성하는 요소는 HTML이 기본이기 때문에 .html 파일에도 적용이 가능합니다.
    다만 위 예제의 ${contextPath}와 같은 것들만 제거해서 사용하시면 됩니다.
    (위 소스를 보시면 스마트 에디터의 스킨 자체가 html로 되어 있습니다.)
    2014.12.03 20:00 신고
댓글쓰기 폼