Ckeditor is not working in a modal dialog

Question

I am trying to use ckeditor inline with knockoutjs in a modal dialog. But it is not working. Ckeditor all buttons are diasbled. It is not working only chrome browser. It is working on firefox and ie. I found a solution but it is not great for me. Problem is about modal showing status.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" contenteditable="true" id="myModalLabel">Modal title</h4>
            </div>
            <div id="bodyModal" contenteditable="true" class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-default navbar-btn  margin-right-button-nav" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-new-window"></span> Edit Modal</button>

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');

Here is a Fiddle

Answer 1

You have to use bootstrap modal events like shown.bs.modal

CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
    $('#myModal').on('shown.bs.modal', function () {
        CKEDITOR.inline('myModalLabel');
        CKEDITOR.inline('bodyModal');
    })    
});

Here is the updated jsFiddle : http://jsfiddle.net/8t882a2s/3/

And an other answer with more information : https://stackoverflow.com/a/25786444/4682796

Answer 2

// My problem was chkeditor drop down was not working propely ON IE.

this worked for me.follow below step to implement.

1. this below line of code will execute after jquery and bootstrap javascript load.
i.e 
1. register the jquery version file
2. bootstrap java script load
3. then execute this code

$.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_contents cke_reset')) {
                modal_this.$element.focus()
            }

        })
    };