네이버 스마트에디터 크롬에서 이미지 삽입 버튼 클릭시 이미지 업로드 페이지 안나오는 현상 해결책

네이버 스마트에디터 크롬에서 이미지 삽입 버튼 클릭시 이미지 업로드 페이지 안나오는 현상 해결책

 

- 어떤 버전순간부터 크롬에서 스마트에디터 이미지 버튼 클릭시 이미지 페이지로 로딩 안됨

 

 

1. 현상

 

 [ IE ]

 

[ Chrome ]

 

2. 프로세스

 

1. 이미지삽입 버튼 클릭 시 하단 iframe 안에 "이미지업로드 페이지" 로딩

 

[ SEditorSkin.html ]

<li class="imgupload husky_seditor_ui_imgupload"> <button type="button" title="이미지삽입"><span>이미지삽입</span></button> <!-- 이미지삽입 레이어 --> <div class="layer husky_seditor_imgupload_layer" style="display:none;"> <div class="pic_content1"> <iframe src="" id="imgUploadFrame" name="imgUploadFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" width="236" height="100"></iframe> </div> </div> <!-- /이미지삽입 레이어 --> </li>

 

2. 스크립트에서 iframe 을 찾아 클릭이벤트 시 페이지 로딩

 

[SE_CustomPlugins.js]

// 파일업로드 클레스 추가 nhn.husky.SE_ImageUpload = $Class({ name: "SE_ImageUpload", $init: function (oAppContainer) { this._assignHTMLObjects(oAppContainer); }, _assignHTMLObjects: function (oAppContainer) { this.oImageUploadLayer = cssquery.getSingle("DIV.husky_seditor_imgupload_layer", oAppContainer); }, $ON_MSG_APP_READY: function () { this.oApp.exec("REGISTER_UI_EVENT", ["imgupload", "click", "SE_TOGGLE_IMAGEUPLOAD_LAYER"]); }, $ON_SE_TOGGLE_IMAGEUPLOAD_LAYER: function () { this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oImageUploadLayer]); imgUploadFrame.location = "imgupload.asp?id=" + this.oApp.sAppId; } });

 

 

3. 해결책

 

1) 이미지 불러오는 스크립트를 보면 imgUploadFrame.location 으로 해당 페이지를 넣어줌

// SE_CustomPlugins.js 일부 $ON_SE_TOGGLE_IMAGEUPLOAD_LAYER: function () { this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oImageUploadLayer]); imgUploadFrame.location = "imgupload.asp?id=" + this.oApp.sAppId; }

 

2) 스킨 페이지 안의 이미지 페이지가 들어가는 iframe 의 "id=imgUploadFrame" 로만 지정

 

- IE는 그래도 name 으로 인식하고 이전 버전 크롬에서도 동일하게 인식하나 어떤 버전(대략 버전 36.0.1985.125 m) 이상 부터는 이것을 인식 못함

- 따라서 imgUploadFrame.location 으로 스크립트에서 지정하면 어떤 element 인지 찾지를 못함

 

3) iframe 의 "id=imgUploadFrame" 뿐 아니라 "name=imgUploadFrame" 까지 넣어주면 제대로 element를 찾음

// SEditorSkin.html <li class="imgupload husky_seditor_ui_imgupload"> <button type="button" title="이미지삽입"><span>이미지삽입</span></button> <!-- 이미지삽입 레이어 --> <div class="layer husky_seditor_imgupload_layer" style="display:none;"> <div class="pic_content1"> <iframe src="" id="imgUploadFrame" name="imgUploadFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" width="236" height="100"></iframe> </div> </div> <!-- /이미지삽입 레이어 --> </li>

 

 

 

 

 

4. 기타

 

- 네이버 스마트에디터는 무료로 제공하여 각자 본인에 맞게 약간씩 수정해서 사용.

- 이미지 업로드의 경우 다양한 방식으로 변경하는데 id만 지정해 위와 같은 문제가 있는 경우가 있음 ( 이 부분도 많이 돌아다니는 방식이라 그대로 카피해서 사용하면 같은 문제 발생 가능성 있음 )