네이버 스마트 에디터 + 이미지 업로드

네이버 스마트 에디터 + 이미지 업로드

에디터를 붙여야 되서 다음/네이버 고민하다가

네이버 에디터로 붙이기로 하였다.

네이버 개발자 센터에 방문해보니 에디터는

Github로 옮겨진것을 확인 하였다.

가장최신 버전도 있지만 이미지 업로드를 

지원하지 않는다 하여 바로 아래버전을 

다운로드 하였다.

압축을풀고

이클립스 프로젝트 안에 적당히 배치 하였다.

SmartEditor2.html 샘플예제를 보고 에디터를 붙여야 하는 부분에 js를 추가 하였다.

<script type="text/javascript" src="<c:url value='/resources/editor/js/HuskyEZCreator.js'/>" charset="utf-8"></script>

textarea에 id를 주고

<textarea id="nttCn" name="nttCn" rows="7" class="require name_s01p" style="height:350px;" title="내용"></textarea>

에디터 불러오는 스크립트를 추가

<script type="text/javascript">
    //전역변수
    var obj = [];
    //스마트에디터 프레임생성
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: obj,
        elPlaceHolder: "nttCn",
        sSkinURI: "",
        htParams : {
            // 툴바 사용 여부
            bUseToolbar : true,
            // 입력창 크기 조절바 사용 여부
            bUseVerticalResizer : true,
            // 모드 탭(Editor | HTML | TEXT) 사용 여부
            bUseModeChanger : true,
        }
    });
script>

페이지를 띄어 보니 잘동작한다.

이미지 업로드

hp_SE2M_AttachQuickPhoto.js의 팝업 URL을 수정한다.

URL을 내 시스템에 맞게 변경하였다.

/**
* 서비스별로 팝업에  parameter를 추가하여 URL을 생성하는 함수
* nhn.husky.SE2M_AttachQuickPhoto.prototype.makePopupURL로 덮어써서 사용하시면 됨.
*/
makePopupURL : function(){
    //var sPopupUrl = "./sample/photo_uploader/photo_uploader.html";
    var sPopupUrl = "/common/editor/photoUploadPop.do";
    return sPopupUrl;
},

기본적으로 제공해주는 것을 사용해도 되지만

나는 기존에 파일업로드가 있기때문에 그것을 활용하여

업로드한 정보를 리턴 받아서 사용하였다.

//리턴받은 이미지 갯수만큼 루프
for(...) {    
    //이미지 html 태그
    var sHTML = "
";
    //에디터에 붙이기
    obj.getById["nttCn"].exec("PASTE_HTML", [sHTML]);
}

이미지가 정상적으로 표시가 되었다.

허나 문제가 있었다.

커서를 2와 3사이에 찍고 이미지를 업로드 하였는데

계속 밑으로만 떨어진다. ㅠㅠ

그냥 에디터껄 쓸껄 그랬나..

구글링 해봐도 명확한 해결책은 보이지 않고

소스를 까보니 의외로 쉬운 간단한 문제였다.

에디터 소스에 attach_photo.js를 열어보니

아래와 같은 function을 사용하는걸 발견하고

기존에 임의로 콜백함수를 만들어 사용했던것을 아래와 같이 바꾸었다.

/**
    *  서버로부터 받은 데이타를 에디터에 전달하고 창을 닫음.
    * @parameter aFileInfo [{},{},...] 
    * @ex aFileInfo = [
    * 	{
        sFileName : "nmms_215646753.gif",
        sFileURL :"http://static.naver.net/www/u/2010/0611/nmms_215646753.gif",
        bNewLine : true
    },
    {
        sFileName : "btn_sch_over.gif",
        sFileURL :"http://static1.naver.net/w9/btn_sch_over.gif",
        bNewLine : true
    }
    * ]
    */
function setPhotoToEditor(oFileInfo){
    if (!!opener && !!opener.nhn && !!opener.nhn.husky && !!opener.nhn.husky.PopUpManager) {
        //스마트 에디터 플러그인을 통해서 넣는 방법 (oFileInfo는 Array)
        opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO', [oFileInfo]);
        //본문에 바로 tag를 넣는 방법 (oFileInfo는 String으로  )
        //opener.nhn.husky.PopUpManager.setCallback(window, 'PASTE_HTML', [oFileInfo]);
    }
}
 	

// 이미지
function imgCallback(files) {    
    var aFileInfo = [];    
    for(var f in files.fileList) {
        var sHTML = "이미지URL;
        var aPhotoInfo = {
            sFileName : 파일명,
            sFileURL : sHTML,
            bNewLine : true
        };
        aFileInfo.push(aPhotoInfo);
    }
    //스마트 에디터 플러그인 부분 이걸쓰면 커서 따라감
    opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO', [aFileInfo]);
    self.close();
}