FCKeditor 한글 이미지 업로드 후 깨진다면...?

현재 환경은 UTF8 캐릭터셋으로써

톰캣 컨넥터 부분에 URIEncoding="UTF-8" 옵션을 추가하여 사용중입니다.

1. 업로드시 한글 깨짐.

FCKeditor 이미지 설정 창의 이미지 정보 탭의 서버 보기를 눌러 나오는

화면에서 업로드 하는 것은 ConnectorServlet.class 를 통하여 업로드 됩니다.

그러나 업로드 탭을 이용하여 업로드 할 경우엔 SimpleUploaderServlet.class 를 통하여

업로드 되면서 한글이 깨져 업로드 됩니다.

해결 방법은 기존 추가된 FCKeditor-2.3.jar 파일의 연결을 끊고

FCKeditor 자바 버전에 있는 src 폴더를 WEB-INF\src 로 복사한 후

SimpleUploaderServlet.java 파일을 수정하면 됩니다.

doPost(...) 메쏘드 안에 보시면

DiskFileUpload upload = new DiskFileUpload();

위와 같은 라인이 있고 그 밑에줄에

upload.setHeaderEncoding("UTF-8"); 식으로 현재 시스템에 맞는 인코딩 타입을

지정하면 됩니다.

2. 한글 이미지를 선택했을 경우 나오는 X박스.

브라우저에서도 한글 이미지 경로를 치고 엔터칠 경우 X박스가 뜨게 됩니다.

이처럼 FCKeditor 에서도 한글 이미지를 선택해서 넣을 경우

URL 이 한글 주소 그대로 들어가므로 이미지가 X박스로 출력되게 됩니다.

해결 방법은 FCKeditor\editor\dialog\fck_image\fck_image.js 를 수정합니다.

1. 이미지를 선택 후 OK 눌렀을 때 encodeURIComponent 로 URL 을 변경해서

에디터에 들어가게끔.

OK() 함수를 수정하면 됩니다.

OK() 함수 처음 부분에

 // 한글 깨짐을 방지하기 위함
 var imgUrl = GetE('txtUrl').value;
 var idx = imgUrl.lastIndexOf("/") + 1;
 imgUrl = imgUrl.substring( 0, idx ) + encodeURIComponent( imgUrl.substring( idx, imgUrl.length ) );
 GetE('txtUrl').value = imgUrl;

위와 같은 소스를 삽입하면 됩니다.

2. 에디터에 들어간 이미지를 우측 버튼을 눌러 이미지 속성을 볼 경우.

OK() 함수만 수정한다면 이미지 속성을 눌러서 볼 경우

이미지 정보 URL 부분이 encode 된 URL 이 나타나기 때문에

LoadSelection() 함수를 수정하여 해결토록 합니다.

GetE('txtUrl').value    = sUrl ;

위 부분을

GetE('txtUrl').value    = decodeURIComponent( sUrl ) ;

위와 같이 decode 되어서 들어가도록 수정합니다.

기타 플래쉬 업로드라든지 다른 부분의 업로드도 위와 같은 방식으로 해결하면

한글 깨짐이나 개체가 안보이는 경우는 해결할수 있을거라 봅니다.

FCKeditor... 기능은 좋지만 까다로운 부분이 많네요. 휴;;

ps. fck_image.js 첨부합니다.