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

   정말 불친절한 네이버가이드 때문에 이걸 하느라고 얼마나 고생했는지 모른다. 전부 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쪽이다.

   그리고나서,,

   스마트에디터를 사용할 jsp페이지에 위와 같이 자바스크립트를 삽입한다.

   textarea 태그의 id 값을 자바스크립트에 넣었던 id와 같게 해주는 것도 잊지 말자.

   다음은 설정을 모두 끝내고 스마트에디터를 실행했을 시의 화면이다.

우측 상단에 있는 "사진"을 클릭.

사진 첨부하기 창이 뜰 것이다.

이미지를 첨부하고 확인.

그럼 이렇게 이미지가 X박스 표시되어 나온다.

정상적이다. 왜냐하면 이클립스에서 새로고침을 하지 않았기 때문이다.

실제로 본 서버에 올리면 잘 돌아간다.

그럼 이미지가 올라갔는지 어떻게 확인하나?

일단 이클립스에서 이미지가 올라간 폴더에 새로고침을 해주고(이때 올렸던 이미지가 추가됐다면 성공한 거다),

스마트에디터의 HTML로 가서 내용을 복사한다.

스마트에디터를 다시 실행하고, HTML로 가서 복사한 내용을 붙여넣기한다.

Editor로 돌아오면 짠~!

   글쓰기를 완료하지 않아도 이미지 파일 자체는 서버에 업로드 된다.

   글쓰기를 완료할 경우, DB에는 이미지 파일 자체가 올라가는 게 아니라 아까 HTML영역에서 복사했던 그 내용이 올라간다.

   이런 데에 시간을 허비하는 건 너무 아깝지 않은가.

   어짜피 오픈소스 갖다 쓰는 건데,, 그냥 대충 어떻게 돌아가겠구나 정도만 알면 된다고 본다.

   이게 뭐라고.. 혼자만 알려고 꼭꼭 숨기는 사람들 보면 참....

   물론 고생 더럽게 해서 알려주기 아깝겠지만, 그런 사람은 더럽게 이기적인 사람이라고 생각한다. ㅡ.ㅡ..;

   인류가 이렇게 발전할 수 있었던 데에는 지식의 전달과 축적이 있었기에 가능했던 것 아닌가. 

   공유하는 세상이 아름다운 세상이다. 크~