CKEditor 이미지 업로드시 JSON 응답, jQuery UI Dialog와 같이 사용시 콤보박스 안열리는 현상 해결

이전글 "CKEditor 4 설치와 PHP 연동 하기"에서 CKEditor의 사용법을 알아 보았습니다.

CKEditor에서 이미지 업로드 후에 에디터에 이미지를 표시하기 위해서 반환되는 값은 다음과 같은 자바스크립트 입니다.

<script type='text/javascript'>
window.parent.CKEDITOR.tools.callFunction(1, '/editor/images/011-php-json-01.png', '')
</script>

최근 새 버전을 설치하고 테스트해본 결과 이 반환값이 JSON 값으로 변경된것 같습니다.

1. 이미지 업로드 성공시 반환값

{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}

- uploaded : 1 로 설정합니다.

- fileName : 업로드 된 파일의 이름입니다.

- url : 업로드 된 파일의 URL (URL 인코딩 됨)입니다. 이 값을 이용해서 에디터 내부에 업로드된 이미지를 표시합니다.

2. 업로드 성공하였지만 부가적인 메세지를 보내고자 할 경우.

{
    "uploaded": 1,
    "fileName": "foo(2).jpg",
    "url": "/files/foo(2).jpg",
    "error": {
        "message": "같은 이름의 파일이 존재합니다."
    }
}

- 위 예는 업로드에 성공했지만, 같은 이름은 파일이 있음을 알립니다.

3. 업로드 실패시 반환값

{
    "uploaded": 0,
    "error": {
        "message": "파일 용량이 허용량을 넘었습니다."
    }
}

- uploaded : 0 으로 설정합니다.

- error.message : 사용자에게 표시 할 오류 메시지입니다.

4. CKEditor 를 jQuery UI Dialog 위에 넣을때 폰트, 스타일 등의 콤보박스가 동작하지 않을 경우 해결 방법

$(document).on('focusin', function(e) {
    e.stopImmediatePropagation();
});

이벤트가 바로 전파되는 것을 막아서 다이얼로그가 이벤트를 가로채는것을 방지합니다.