ckeditor 4와 bootstrap Modal 함께시 input disabled bug 해결 방법.

ckeditor 4와 bootstrap Modal 함께 사용시 인풋이 선택이 되지 않고 수정이 안되는 버그 해결 방법.

Bootstrap Modal이 열려있는 상태에서 ckeditor 4의 플러그인 설정창을 열면 모든 input란이 diabled="true" 상태로 입력이 불가능해지는 문제 해결방법에 대해 다룬다.

문제발생

• 문제의 원인은 아래와 같이 정의할 수 있다.
• Bootstrap Modal을 열어둔 상태에서 ckeditor의 플러그인 설정창(예. image properies)를 연다.
• ckeditor 4의 플러그인 설정창은 Bootstrap Modal을 사용한다.
• 동시에 2개 이상의 Bootstrap Modal이 한 페이지에 열려있을 때 오작동을 발생시킨다.

문제해결 방법

• 방법 1. ckeditor 4의 플러그인 설정창을 열기 전에 Bootstrap  Modal을 닫는다.
• 항상 Bootstrap Modal은 1개만 열고, 나머지는 닫도록 코딩을 한다.
• 이 방법이 문제가 발생되지 않도록 하는 가장 빠른 방법이다.
• 방법 2. 사용하는 Modal에 focus를 하도록 한다.
• 열려있는 2개이상의 모달창 중에 현재 사용하고자 하는 모달창을 최고 상위로 올려주며 focus 해주는 방법
• 자세한 사항은 아래 링크의 aaronsnow 의 답변을 확인하자.
• http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

문제 해결책 (방법2에 해당)

$.fn.modal.Constructor.prototype.enforceFocus = function() {
  modal_this = this
  $(document).on('focusin.modal', function (e) {
    if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
      modal_this.$element.focus()
    }
  })
};

* 위에 링크의 aaronsnow의 코드를 옮겨온 것이다.

결론

• 필자 또한 문제가 발생되는 해당 페이지의 상단에 aaronsnow의 코드를 추가함으로써 문제를 해결하였다.

후기

• 하지만, 문제 해결보다 더 큰 문제점은 해결되지 않았다. "본인이 직접 만들지 않은 두개 이상의 플러그인이 만나 생기는 문제점(버그)의 원인을 파악하는데는 쉽지 않다" 는 것이다.
• ckeditor 플러그인과 bootstrap의 충돌은 전혀 예상하지 못하였다.
• 다행히도 비슷한 사례의 issue가 등록되어 천만 다행히 많은 시간을 들이지 않고 해결 할 수 있었던 감사한 사건이었다.