네이버 스마트에디터 설치하기

와 위지윅기능 추가한다고 완전 좃뺑이쳣다.

 

그래도 옛날에 추가하던 거에 비하면 엄청 빠르게 끝냈다.

 

나는 이 버전을 추가했다. SmartEditor2.0 Basic (2.3.10)

 

다운로드는 여기서 받는다.

http://dev.naver.com/projects/smarteditor/download

 

 

다운로드받아서 직접  해봤으나 소스에 오타가 조금 있었기에 오타수정한파일을 직접 올린다.

SE2.3.10.O11036.zip

 

해당 소스를 압축풀고 홈페이지가 있는 경로에 설치한다.

압축 푼 폴더를 se2로 이름변경하고 설치한 모습이다.

 

 

에디터를 통해서 폰트변경, 사이즈변경 등 많은 기능이 가능하며 사진업로드도 가능한데

사진업로드를 제대로 하려면 소스를 조금 수정해줘야한다.

 

 

1. 사진 경로 설정하기

photo-uploader/popup 으로 들어간다.

 

여기에서 file_uploader_html5.php 파일을 열고 아래 사진을 보라

 

 

$sFileInfo .= "&sFileURL=/smarteditor/demo/upload/".$file->name;

이부분에서 /smarteditor/demo/upload/ 이부분이 사진이 저장될 경로다.

초기에 데모버전으로 설정되어있기때문에 자기의 환경에 맞게끔 바꾸자.

바꿀 때 도메인을 먹여서 사용한다면 도메인까지 붙여서 적어야한다 (예 : 이거를 /smarteditor/demo/upload/  http://www.domino.co.kr/se2/upload/    로 변경해주기)

그러면 에디터에 출력되는 사진이 se2/upload/ 경로를 통해 저장되며 불러와진다.

다시한번 예기하지만 자기의 환경에 맞게끔 바꿔야한다.

 

그리고 해당경로에 만들어진 upload 폴더는 권한문제때문에 업로드가 안되는경우가 있기 때문에 확인하고 넘어가자. chmod 705  로 설정하니 됨.

 

 

2. 사진 이름 변경하기

 

1번항목만 설정하더라도 사진 업로드는 가능하지만 동일한 이름의 사진을 업로드한다면 덮어쓰기가 되어버린다.

 

때문에 사진을 업로드할 때 파일명을 변경하여 업로드 시켜주는게 좋다.

file_uploader_html5.php 파일을 열고 다음의 소스를 추가하자

 

    /* 파일이름 중복 방지를 위한 코드 */
  $addName = strtotime(date("Y-m-d H:i:s"));  //현재날짜,시간,분초구하기
  $milliseconds = round(microtime(true) * 1000);  //밀리초 구하기
  $addName .= $milliseconds;       //파일이름에 밀리초 추가하기
  $file->name = $addName . '_' . $file->name;
  //중복방지 코드 끝

 

<추가전>

 

 

<추가후>

 

소스 추가 후 저장하면 업로드되는 사진들이 중복되지않고 고유의 이름을 가진 채 업로드된다.

 

이 덕에 우리는 업로드할 때 사진 이름의 중복을 걱정하지 않아도 된다.

 

 

3. 에디터 적용하기

 

이제 적용을 해보자.

에디터를 적용시킬 페이지의 head 부분에 다음의 소스를 추가하자.

 

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

 

src 부분의 se2는 폴더이름이다. Smart Editor가 들어있는 폴더이므로, 폴더명을 변경한다면 여기도 변경된 이름을 입력해야한다.

 

그다음 에디터를 적용시킬 textarea를 만든 다음, </textarea>뒤에 javascript 소스를 추가해준다.

<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "quizbogi",
    sSkinURI: "se2/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
});
function submitContents(elClicked) {
oEditors.getById["quizbogi"].exec("UPDATE_CONTENTS_FIELD", []);}
</script>

 

 

javascript 소스 내부에 elPlaceHolde 부분의 값은 textarea의 id 값을 넣어준다.

sSkinURI 부분의 값은 SmartEditor2Skin.html 이 있는 경로를 넣어준다.

function submitContents 는 에디터에 입력된 값이 textarea에 들어가서 값이 전달되게끔 해준다.

입력버튼에 submitContents를 onclick 속성에 추가해주자.

 

 

 

그러면 작업은 끝 아래처럼 에디터가 작동하는 모습을 볼 수 있다.