Textarea에 Naver Smarteditor 적용하기

NAVER에서 제공하는 SmartEdit사용하기

 

단순한 문자만 입력할 수 있는 textarea 태크를 사용 하지않고

 

다음에디터, 네이버에디터 등 많은 곳에서 편집기 오픈소스를 제공하고 있어

 

저작권없이 오픈소스를 다운받아 사용하고 변경하여 자신이 원하는

 

디자인을 사용할 수 있습니다.

 

 

 

먼저 네이버개발자페이지에 접속해 스마트에디트를 다운받습니다.

 

 

NAVER Developers - SmartEditor Basic Download Page

 

 

 

그리고 다운받고자 하는 오픈소스 파일을 다운받는데

 

저는 2.3.10.11329버전을 다운받았습니다.

 

다운받아 압축을 풀고 내부의 모든 파일을

 

프로젝트 폴더로 옮깁니다.

 

 

node.js에서는 public이라는 파일만 global하게 공유되어 있어서

 

외부에서 크롬개발자모드로 검색해 내부 파일들을 볼 수 있고

 

작성중인 코드에서 파일을 include하여 편리한 곳이 public 폴더이기 때문에

 

저는 이 public 폴더 안에 "smartedit"라는 폴더를 하나 더 만들어

 

그 안에 압축을 푼 파일을 모두 옮겨 두었습니다.

 

 

그리고 head 부분에 /smarteditor/js/HuskyEZCreator.js를 include 시키고,

 

jquery를 사용해야 되기 때문에 jquery도 같이 include 합니다.

 

 

그리고 Button을 누르면 특정 이벤트가 발생하도록 설정합니다.

 

head 부분에 JQuery를 사용하여

 

버튼을 클릭하게 되면 contents라는 id를 가진 textarea에

 

에디터를 대입하게되고 form을 submit하도록 이벤트를 걸었습니다.

 

그 윗 부분은 프레임을 설정하는 부분으로

 

textarea id를 설정하고, sSkinURI는 글씨체와 색상 등의 설정을 가져오는 부분이고,

 

htParams는 툴바나 입력창의 크기조절바, 모드탭을 사용할 지의 여부를 설정합니다.

 

모두 사용하기 위해 전부 true로 설정합니다.

 

 

기존의 textarea에서

 

네이버에서 제공하는 Smarteditor가 적용됬습니다.  

 

 

사진을 업로드 기능은 따로 서버URL를 셋팅해야 하는데

 

그 부분은 예제(/smarteditor/smarteditor2.js)가 포함되어 들어있으므로

 

코드를 복사해 붙여넣으면 된다.

 

그리고 서버URL을 세팅은 사진을 업로드하면 저장할 곳을 지정해주면 되는데

 

/smarteditor/photo_uploader/popup/file_uploader_html5.php

/smarteditor/photo_uploader/popup/file_uploader.php

 

두 파일의 $uploadDir와 &sFileURL에 저장경로를 입력해주면 세팅은 완료됩니다.

 

ex) $uploadDir="http://127.0.0.1:3000/upload/";

ex) $&sFileURL="http://127.0.0.1:3000/upload/".urlencode(urlencode($name));