네이버 오픈소스 스마트에디터 이미지 업로드 방법

네이버 오픈소스 스마트 에디터 2.x  버전에 보면 이미지를 업로드할 수 있는 버튼이 생겼지만 구현은 되어 있지 않다.

네이버 스마트 에디터를 업데이트해야 할 결정적인 이유 중의 하나는 (구 버전에서는) IE 9 버전에서 "호환성 보기"를 클릭하지 않으면 에디터 창이 제대로 안보인다는데 있다.

이전에 사용하던 구 버전이 IE 9이 나오기 전에 만들어진 것이고 그 사이 새 버전이 나와도 업데이트를 하지 않았는데, 이번에 큰 맘먹고 업데이트! IE9에서도 호환이 잘 이루어진다.

간단하게 수정해서 사용가능하도록 하려면 아래와 같이...

출처 : http://dev.naver.com/projects/smarteditor/issue/40442

*************************************************************************************

※ 사진 퀵 업로더 서버 설정 방법

*************************************************************************************

1. Apache + php 설치 또는 APM 설치 

2. 서버에 SmartEditor 2.x.x Basic 폴더를 서버에 업로드 ( 도메인명 or 아이피 주소 복사)

3. 스마트 에디터 폴더의 popup/quick_photo 폴더 아래 ‘upload’라는 이름의 폴더 생성

4. 스마트 에디터 폴더의 popup/quick_photo/FileUploader_html5.php 파일의 변수 주소 변경

    $sFileInfo .= "&sFileURL=http://(도메인명or아이피주소)/(스마트에디터폴더주소)/popup/upload/".$file->name;

(추가) 만약 이미지 저장경로를 바꾼다면 $new_path 에 있는 상대경로도 같이 바꿔주어야 한다.

5. 스마트 에디터 폴더의 popup/quick_photo/FileUploader.php 파일의 변수 주소 변경

    $url .= "&sFileURL=http://(도메인명or아이피주소)/(스마트에디터폴더주소)/popup/upload/".urlencode(urlencode($name));

6. 스마트 에디터 폴더의 popup/quick_photo/QuickPhotoPopup.js 파일의 변수 주소 변경

  - function callFileUploader 함수의 

     sUrl : http://(도메인명or아이피주소)/(스마트에디터폴더주소)/popup/quick_photo/FileUploader.php',

  - function html5Upload() 함수의 

     sUploadURL = http://(도메인명or아이피주소)/(스마트에디터폴더주소)/popup/quick_photo/FileUploader_html5.php;

(추가) 아래는 가이드에 언급되어 있는 추가적인 부분이다.

7. callback.html

  -  document.domain 변경

8. SmartEditor2Skin.html 파일 에 다음과 같이 파일을 선언한다 . 

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

*************************************************************************************

※ 사진 퀵 업로더 팝업 창 자동으로 닫히도록 설정하기

*************************************************************************************

스마트 에디터 폴더의  popup/quick_photo/QuickPhotoPopup.js 파일의 아래 내용 수정

1. [취소] 버튼을 누르면 닫히도록 만들기

   function closeWindow 함수의 특정 코드 주석 제거

//window.close(); 부분에서 주석 제거 -> window.close(); 

2. [확인] 버튼을 누르면 닫히도록 만들기

   - '업로드를 성공 했을 때'

    function callFileUploader 함수에서 success : function(oCustomEvent) 함수의 가장 아래 부분에 

    //window.close(); 부분에서 주석 제거 -> window.close(); 

   - '업로드를 실패 했을 때'

    function callFileUploader 함수에서 error : function(oCustomEvent) 함수의 가장 아래 부분에 

    제일 마지막줄에 window.close(); 코드 추가

*************************************************************************************

* 예를 들어, www.naver.com과 naver.com 은 다른 도메인으로 인식을 하기 때문에 모든 URL을 똑같이 맞춰줄 필요가 있다.

이렇게 하지 않으면 파이어폭스나 크롬 등의 브라우저에서는 NS_ERROR_DOM_BAD_URI 에러가 날 수도 있다.