Apologies if this has already been asked somewhere, I couldn't see any way to search the forum.
I'm trying to host CKEditor in a simple Twitter Bootstrap Modal. I'm doing nothing more complex than
<div id="note-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="notemodallabel" aria-hidden="true">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3 id="notemodallabel">Add Note</h3></div>
<div class="modal-body">@Html.TextArea("txtNotes")</div>
<div class="modal-footer"><button class="btn btn-primary" type="submit"><i class="icon-white icon-plus"></i> Add Note</button></div>
</div>
and
CKEDITOR.replace('txtNotes');
in my document.ready function.
The issue I have is that whilst the editor shows fine, all of the dropdown menus (for paragraph style etc) don't work - they appear when clicked on and then immediately disappear, meaning that it's impossible to select from them.
Does anybody have any idea how to fix this?
Thanks
Andy
I have the same issue
and I have reported it here. You might want to "me too" on the ticket.
code solution
I wasn't keen on the solution suggested at ticket 9934 because it requires you to edit the bootstrap file itself. I found this, which looked promising, but I couldn't get it to work. Then I found this, which inspired the solution I ended up implementing -- a separate file:
// bootstrap-ckeditor-fix.js // hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog // // Include this file AFTER both jQuery and bootstrap are loaded. $.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() } }) };This really really helped me
This really really helped me out and saved me time. Thank you!
I had the same issue but had to change the condition
I added the following condidtion to make it to work.
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()
}
Please see the working solution here : https://github.com/srinivas-gangji/CKEditor-IE
THANKS!!!
You have no idea how usefull your post was! I have been googling and debugging for 6 days now. Your solution not only worked but it only took a few seconds to implement. I could kiss you if you were here!