How to use CKEditor in a Bootstrap Modal?

Question

If I use the CKEditor plugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this

<!-- Modal -->  <div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">      <div class="modal-dialog modal-lg">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>          <h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>        </div>        <div class="modal-body">              <form>              <textarea name="editor1" id="editor1" rows="10" cols="80">              This is my textarea to be replaced with CKEditor.              </textarea>            <script>              CKEDITOR.replace('editor1');              </script>              </form>         </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>          <button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>        </div>      </div>       </div>  </div> 

The editor works, but all the form controls on the popup windows of the editor are disabled, if you try to add a link or an image, for example, you cannot insert the URL or any description because the inputs are disabled.

Any workaround for this issue?

This is a fiddle example: http://jsfiddle.net/7zDay/

Answer 1

This should help http://jsfiddle.net/pvkovalev/4PACy/

$.fn.modal.Constructor.prototype.enforceFocus = function () {     var $modalElement = this.$element;     $(document).on('focusin.modal', function (e) {         var $parent = $(e.target.parentNode);         if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length             // add whatever conditions you need here:             &&             !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {             $modalElement.focus()         }     }) }; 

Update October 2016:

CDN link for CKEditor has been changed, so I updated jsfiddle