2014. 8. 28. 11:37

전자정부 프레임 워크 네이버 스마트 에디터 적용

이번 플젝에서 전자정부 프레임워크를 도입을 했다.

이유는 현재 회사가 java 에 대한 레퍼런스가 없다.

이번에 전자정부 프레임워크를 사용하게 되면서 느낀점은 상용 서비스에서 그대로 사용하기에는 많은 문제점이 있다.

 

아무튼 전자정부 프레임워크는 HtmlArea3.0 이라는 에디터를 쓴다.

나는 사용하는데 아무런 불편함을 느끼지 못한다.

근데 고객은 바꾸어 달라고 한다;;;

 

그래서 이번에 전자정부 프레임워크에 nse를 추가 하면서 했던 짓거리를 쓸려고 한다.

우선 네이버 스마트 에디터를 다운로드 받자.(http://dev.naver.com/projects/smarteditor)

나는 해당 내용을 webapp 밑에 위치 시켰다(webapp/nse/**)

 

HtmlArea3.0 에서 nse로 바꾸는데 다른점에 문제점은 없으나 사진 업로드 부분을 nse것을 쓸수가 없다.

그래서 기존 전자정부 프레임워크의 사진 업로드 화면을 이용을 했다.

 

우선 네이버 에디터를 사용하려고 하는 화면에 다음을 추가한다.

일반적으로 nse를 적용하는 것과 같다.

<script src="${pageContext.request.contextPath}/nse/js/HuskyEZCreator.js" charset="utf-8"></script> // nse js 추가

<script type="text/javaScript" language="javascript">
var oEditors = [];

$(document).ready(function(){
 nhn.husky.EZCreator.createInIFrame({
  oAppRef: oEditors,
  elPlaceHolder: "qestnCn",
  sSkinURI: "${pageContext.request.contextPath}/nse/SmartEditor2Skin.html", 
  getContextPath : "${pageContext.request.contextPath}",
  htParams : {
   bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
   bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
   bUseModeChanger : true,   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
   getContextPath : "${pageContext.request.contextPath}",
   fOnBeforeUnload : function(){
   }
  }, //boolean
  fOnAppLoad : function(){
  },
  fCreator: "createSEditor2"
 });
});

</script>

여기에서 틀린점은 위에 볼드 처리된 두 부분을 추가한 것이다.

이유는 아래에서 설명한다.

 

SE2BasicCreator.js 파일에 다음을 변경한다.

oEditor.registerPlugin(new nhn.husky.SE2M_AttachQuickPhoto(elAppContainer,htParams)); // 사진

 

hp_SE2M_AttachQuickPhoto.js 파일에 다음을 변경한다.

makePopupURL : function(){
  
  //var sPopupUrl = "./photo_uploader/popup/photo_uploader.html";
  var sPopupUrl = this.htParams.getContextPath+"/utl/wed/insertImage.do";
  
  return sPopupUrl;
 },

여기에서 중요한 점은 this.htParams.getContextPath 을 추가 하기 위하여 위에 부분이 선행 되었다.

(왜 저렇게 했는지는 개발자라면 알것이라고 생각한다.)

 

같은 파일안에 다음을 추가한다.

/**
  * 팝업에서 호출되는 메세지.
  */
 $ON_SET_PHOTO_NSE : function(aPhotoData){
  
  try{
   var sHTML = '<img src="'+aPhotoData.f_url+'" alt="'+aPhotoData.f_alt;
   if(aPhotoData.f_horiz != ''){          // 이렇게 써도 되고 아래 처럼 써도 되고 알아서...
    sHTML +='" width="'+aPhotoData.f_horiz;
   }
   if(aPhotoData.f_vert){                  // 이렇게 써도 되고 위 처럼 써도 되고 알아서...
    sHTML +='" height="'+aPhotoData.f_vert;
   }
   if(aPhotoData.f_align){
    sHTML +='" align="'+aPhotoData.f_align;
   }
   if(aPhotoData.f_border){
    sHTML +='" border="'+aPhotoData.f_border;
   }
   sHTML +=' " />';

   this.oApp.exec("PASTE_HTML", [sHTML]); // 위즐 첨부 파일 부분 확인
  }catch(e){
   // upload시 error발생에 대해서 skip함
   //alert("ERROR");
   return false;
  }
 },

위의 내용은 $ON_SET_PHOTO 를 참조하여 만들었으며 전자정부 프레임워크 사진 업로드 부분에서 호출용으로 쓰인다.

 

마지막으로 EgovInsertImage.jsp 전자정부 프레임워크에 사진 업로드 하는 jsp 파일에서

215라인 정도에 수정을 한다.

if(String(opener.location).indexOf("SmartEditor2Skin") > -1){
   //opener.parent.pasteImgHTML(param);
   if (!!opener && !!opener.nhn && !!opener.nhn.husky && !!opener.nhn.husky.PopUpManager) {
    opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO_NSE', [param]);
   }
   window.close();
  }else{

   __dlg_close(param);
   return false;
  }

볼드 처리한 부분을 추가 및 수정 했다.

처음 if 문은 네이버 스마트 에디터 인지 판단하기 위한 부분 두분째 if 문은 스마트 에디터 인지 판단하기 위한 부분 ㅋㅋ 그냥 두개 다 걸었다. 하나만 걸어도 무방하다.

opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO_NSE', [param]);
이 부분이 $ON_SET_PHOTO_NSE 를 호출한다.

That's ALL.

이걸 하면서 중요한 부분은 contextPath 부분이다.

 

나는 티스토리에 잘 오지 않는다.. 댓글 달아도 잘 안 본다.

욕하지 말지어다!~

적용하는데 문제가 있거나 똥줄이 타거든 byeclub@naver.com 으로 티스토리 댓글좀 봐주세요~

메일 주기 바란다.

모르는 거면 댓글 안달고 알면 단다.

 

'Java > ETC' 카테고리의 다른 글

전자정부 프레임 워크 네이버 스마트 에디터 적용  (1) 2014.08.28
Google Code Jam!!!  (0) 2009.08.14
Trackback 0 Comment 1
  1. 문지예 2015.05.25 20:53 address edit & del reply

    sSkinURI 요부분 경로를 절대경로, 상대경로 다 해봤는데 계속 에러.. ${pageContext.request.contextPath} 이거 추가하니 되네요. 보배롭다 정말..
    정말정말 감사합니다!