[JSP] naver SmartEditor2 이미지 첨부 기능 (수정 보완)

탁돌이개발자

추천 수 308

https://zero-gravity.tistory.com/171

정말 불친절한 네이버가이드 때문에 이걸 하느라고 얼마나 고생했는지 모른다. 전부 php로 되어 있어서 이걸 jsp로 바꾸고 해야 하는데, 다른 사람들이 블로그에 올려놓은 것들을 보니 저마다 조각조각이라 어찌할 방도가 없었다. 결국 회사 선배의 도움으로 해결..

혹시라도 나같이 jsp 스마트에디터 이미지 첨부를 미친듯이 구글링하고 있을 불쌍한 중생들을 위해 아래 파일과 간단한 방법을 올린다.

se2.zip

먼저 첨부한 파일을 다운로드 받아서 폴더째 서버에 복사 붙여넣기 한다.

그리고 cos.jar파일을 lib에 추가해준다. 이 글 참조 → http://zero-gravity.tistory.com/168

(MultipartRequest와 DefaultFileRenamePolicy를 사용하기 때문..)

나머지는 다른 환경에서 작동하도록 첨부한 파일들에서 몇몇 설정만 변경해주면 된다.

se2 > photo_uploader > popup > file_uploader.jsp

path를 각자의 "서버 안에 있는 폴더"로 경로를 변경해준다.

에를 들어, 프로젝트의 WebContent 안에 있는 uploadFolder를 경로로 설정하고 싶다면,

아래와 같이 변경해줘야 한다. 각자 경로에 맞춰서.(무슨 말인지 알 거다.)

String path = "D:/folder/workspace/projectName/WebContent/uploadFolder";

path는 스마트에디터로 이미지를 첨부했을 시에 업로드 될 경로다.

참고: 만약 path를 request.getSession().getServletContext().getRealPath("/") + File.separator + "저장될 폴더" 이런 식으로 써주면 폴더를 새로고침 하지 않아도 이미지를 즉각적으로 확인할 수 있다. 이 때 이미지가 저장되는 곳은 metadata쪽이다.

그리고나서,,

<!-- Smart Editor -->
<script type="text/javascript" src="<%=request.getContextPath()%>/se2폴더를 붙여넣기 한 곳의 경로/se2/js/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/se2폴더를 붙여넣기 한 곳의 경로/se2/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js" charset="utf-8"></script>
 
 
<!-- Smart Editor -->
<script type="text/javascript">
 
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "textAreaContent",
    sSkinURI: "<%=request.getContextPath()%>/se2폴더를 붙여넣기 한 곳의 경로/se2/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
});
 
//‘저장’ 버튼을 누르는 등 저장을 위한 액션을 했을 때 submitContents가 호출된다고 가정한다.
function submitContents(elClickedObj) {
    // 에디터의 내용이 textarea에 적용된다.
    oEditors.getById["textAreaContent"].exec("UPDATE_CONTENTS_FIELD", [ ]);
 
    // 에디터의 내용에 대한 값 검증은 이곳에서
    // document.getElementById("textAreaContent").value를 이용해서 처리한다.
  
    try {
        elClickedObj.form.submit();
    } catch(e) {
     
    }
}
 
// textArea에 이미지 첨부
function pasteHTML(filepath){
    var sHTML = '<img src="<%=request.getContextPath()%>/path에서 설정했던 경로/'+filepath+'">';
    oEditors.getById["textAreaContent"].exec("PASTE_HTML", [sHTML]);
}
 
</script>