본문 바로가기
프로그래밍/자바스크립트

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

by pentode 2019. 1. 23.

이전글 "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();

});


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

반응형