[스프링] spring 프레임워크를 이용하여 java/jsp로 CKEditor에 이미지 업로드 구현하기

저는 이번 프로젝트에서 CKEditor 웹에디터를 사용하여 작업을 하고 있습니다.

CKEditor가 생각보다 많이 사용하고 있고 기능도 많더군요.

에디터에서 이미지를 바로 올려서 에디터에 보이게 구현을 하려는데,

CKEditor 웹에디터에서는 이미지 업로드 부분을 언어에 맞게 구현을 해줘야 합니다.

아마도 다른 에디터들도 마찬가지겠죠.

그래서, 이미지 업로드 부분을 Java로 구현하는 작업을 해보겠습니다.

먼저, CKEditor를 붙였다면.. CKEditor 소스 중에 아래와 같은 부분이 있습니다.

제가 지금 하고 있는 프로젝트에서는 ckeditor.jsp라는 파일에 아래처럼 구현이 돼 있더라구요.

'CKEDITOR.replace(' 이 단어로 js 파일이나 jsp 파일을 검색하면 어느 파일에 구현돼 있는지 나올 것 같습니다.

찾았으면 그 부분에 아래 한 줄을 추가해 주세요.

이미지 경로는 앞으로 만들 소스가 담긴 url 입니다.

filebrowserImageUploadUrl: "...이미지 경로..."

위처럼 한줄을 추가하면 웹에디터에서 [이미지] 아이콘을 클릭했을 때

아래처럼 [업로드]라는 탭이 추가되었음을 확인할 수 있습니다.

자, 위 [업로드] 탭에서 이미지를 선택하고 [서버로 전송] 버튼을 눌렀을 때 실제로 동작하는 부분을 스프링을 사용한 java/jsp 파일로 만들어 보겠습니다.

저는 아까 이미지 경로를 com/file/ckeditorImageUpload.do라고 했기 때문에 controller에 ckeditorImageUpload 라는 메소드를 생성했습니다.

이처럼 ckeditorImageUpload 메소드에 업로드된 이미지의 이미지명을 바꾸고 저장하는 소스를 구현한 다음에 저장된 이미지의  웹경로인 url을 dto.imageUrl 에 저장했습니다.

그리고, 아래처럼 ckeditorImageUpload.jsp 파일에 ${dto.imageUrl}을 셋팅합니다.

그리고, CKEditorFuncNum은 CKEditor에서 업로드하는 이미지에 부여하는 일련번호인데, 저장해 두었다가 아래처럼 callback 함수에서 다시 적어주면 됩니다.

이미지 업로드가 완료되면 '이미지를 업로드 하였습니다.'라는 메시지가 나타나도록 했습니다.

저는 FileUploadDto에서 자동으로 CKEditorFuncNum 값을 저장하도록 변수를 하나 만들어 놓았습니다.

자, 이제 이미지 업로드하는 소스를 모두 완료했으니 실제로 이미지를 업로드 해볼까요?

이미지가 업로드 완료되니 '이미지를 업로드 하였습니다.'라는 메시지가 나타나네요.

[이미지 정보] 탭에 방금 업로드한 이미지가 나타납니다.

너비와 높이 등을 변경한 후 확인을 누르세요.

그럼, CKEditor에 이미지가 나타납니다.

이상으로 CKEditor에서 이미지를 스프링을 이용하여 java/jsp로 구현해 보았습니다.