네이버 스마트에디터2 인자값 전달 방법

게시판에 널리 유용하게 쓰이는 네이버 스마트 에디터2를 그룹웨어에 적용해서 사용하다보니

몇가지 문제가 발생을 한다.

멀티 이미지 업로드를 적용하다보니 게시판이 여러군대 있어서 업로드된 이미지를 기능별로 분류해야 하는 문제점이..

한군데 몰아서 사용해도 큰 문제되는 것은 아니지만 업로드된 이미지를 삭제해야 되는 경우에 문제도 있었고..

공개된 스마트 에디터2를 암만 봐도 당췌 모르겠더라..

몇일간 구글링 하던차에 에디터 객체를 배열잡아서 ID를 받아서 처리하던분에 포스팅을 보고 이래 저래 응용을 해서 넣고 뺴고 해보니

잘 동작이 된다.

혹시나 나같이 고생하시는분들이 있을까봐서 없는 실력이지만... 포스팅해둡니다.

- 스마트 에디터2 구조도

1) SmartEditor2.html   

{
2) <script type="text/javascript" src="./js/service/HuskyEZCreator.js" charset="utf-8"></script> 

 
          SmartEditor2Skin.html  (SmartEditor2.html내 포함)

           {
                <script type="text/javascript" src="./js/service/SE2BasicCreator.js" charset="utf-8"></script>  
           3) <script type="text/javascript" src="./photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="utf-8"></script> 

            {

                         4) var sPopupUrl = "./photo_uploader/popup/photo_uploader.html"; (hp_SE2M_AttachQuickPhoto.js 내 포함)
                         5) <script type="text/javascript" src="attach_photo.js" charset="utf-8"></script> 

                              {

                                           6) sUploadURL = 'FileUploader_html5.asp'; (attach_photo.js 내 포함)

                         }

             }
 

 }

- 구현 방법

1) SmartEditor2.html

   에디터를 생성할때 게시판 별로 이미지 저장 위치와 저장 폴더명를 지정해준다.

   (저장 폴더명은 timestamp를 사용해서 유일 폴더로 만든다. 이미지를 저장했다가 게시글을 저장하지 않거나 글 삭제시 해당 폴더를 통쨰로

   지우려고 저장 폴더명을 지정했음)

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

생성된 Editor객체에 인자값 전달

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

photo_uploader.html 를 지정해주는 js에 넘어온 이미지 경로와 임시 폴더 명을 전달해 준다.

사실 photo_uploader.html 에서 에디터에 설정값을 내부적으로 받을수 있으면 더더욱이 좋왔겠는데

잘 몰라서 html 파일에 인자값을 전달해서 처리하는 방식으로 했다. (누구 아시는분 댓글좀 달아주시면..)

4) var sPopupUrl = "./photo_uploader/popup/photo_uploader.html"; 

전달된 경로값과 임시폴더명을 스크립트로 받아서 값을 받아둔다.

최종적으로는 attach_photo.js 안에 이미지 저장 파일 (FileUploader_html5.asp / FileUploader_html5.php등..)에 인자 전달이 목적이다

전달된 값들 확인용..

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

인자값을 내부에 전달해준다

ajax를 해보지 않아서 무작정 인자값을 다음 파일로 넘겼더니 넘어오지 않더라..

header에 담아서 보내야 값이 재대로 넘어간다... (삽질 많이 했음.. 무식이 죄다.)

6) sUploadURL = 'FileUploader_html5.asp';

넘어온 값을 REQUEST로 받아온다.

특이점은 위에서 file-ximgPath 로 넘겼는데 HTTP_FILE_ximgPath 로 넘어온다는것

file-xDummyPath --> HTTP_FILE_xDummyPath

또한 5번에 아래 화면을 보면 file-name을 encodeURIComponent로 인코딩을 했는데 UTF8 인코딩이다.

인코딩값 때문에 한글파일일 경우 문제가 발생을 해서

아래 소스로 Decode 시켜서 사용했다

FUNCTION URLDecode(str)
'// This function:
'// - decodes any utf-8 encoded characters into unicode characters eg. (%C3%A5 = å)
'// - replaces any plus sign separators with a space character
'//
'// IMPORTANT:
'// Your webpage must use the UTF-8 character set. Easiest method is to use this META tag:
'// <meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8" />
'//
    Dim objScript
    Set objScript = Server.CreateObject("ScriptControl")
    objScript.Language = "JavaScript"
    URLDecode = objScript.Eval("decodeURIComponent(""" & str & """.replace(/\+/g,"" ""))")
    Set objScript = NOTHING

END FUNCTION

- 기타

테스트는 인터넷 익스플로러 11

구글 크롬 브라우져

엣지 브라우져에서 테스트를 했습니다.

참고로 글쓰기 이후 스마트 에디터 스크립트에서 fOnBeforeUnload: function () 에서 이미지 삭제 로직을 돌려서 폴더째 삭제 시킨다.

글쓰기를 저장하면 인자값을 추가로 주어서 저장 할지 삭제할지 구분해서 삭제 로직을 돌릴지 말지 결정을 했다.

구글링을 해봐도 시원한 답이 없는것 보니까

다들 적용해서 사용하는데 공개해주시지 않는듯 해서..

없는 실력에 몇자 남깁니다.

다음은 요즘 네이버 에디터3 에 포함되어 있는 이미지 편집기를 달아볼 생각입니다.

인터넷 익스플로러에서 클립보드 이미지 붙여넣기는 잘되는데 엣지브라우져나 크롬에서는 동작되지 않더군요.

네이버에서도 그런 문제때문에 이미지 편집기를 별도로 만든것 같네요.