Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created January 7, 2016 19:05
Show Gist options
  • Save james2doyle/65d06029bfd128dd5ecc to your computer and use it in GitHub Desktop.
Save james2doyle/65d06029bfd128dd5ecc to your computer and use it in GitHub Desktop.
A patch for using CKEditor inside a bootstrap modal. Fixed the issue with fields not focusing in the modal.
// 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.
// http://ckeditor.com/comment/127719#comment-127719
$.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()
}
})
};
@shalabhgupta1985
Copy link

I tried this code, but it seems to be causing the same issue.

  1. Bootstrap version: 3.3.6
  2. CKEditor version: 4.6.2

Its just the dropdowns inside the CKEditor whch are causing the issue within Bootstrap modals.

Sequence of loading the scripts are as follows:

@Scripts.Render("/bundles/jquery")
@Scripts.Render("
/bundles/jqueryval")
@Scripts.Render("/bundles/bootstrap")
@Scripts.Render("
/bundles/ckeditor")
@Scripts.Render("~/bundles/ckeditorBootstrapFix")

Where bundles are

bundles.Add(new ScriptBundle("/bundles/jquery").Include(
"
/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/ckeditor").Include(
        "~/Scripts/ckeditor/ckeditor.js"));

        bundles.Add(new ScriptBundle("~/bundles/ckeditorBootstrapFix").Include(
            "~/Scripts/bootstrap-ckeditor-fix.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                   "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"));

@pudjamansyurin
Copy link

not work for me

@netteria
Copy link

Me too:(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment