Ckeditor drop down issue on Bootstrap modal (Open and close immediately on click)

Question

I have opened ckeditor inside bootstrap modal but format and size drop down are not working properly. When I click on size or format drop down it opens and close immediately, I read that it is a bug in ckeditor for bootstrap modal. I found solution online for it but that is not working.

solution I found online and not working :-

    $.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()
        }
    })
  };

JS from where I call jsp and where ck editor:

  $scope.emailMsgSetting = function(msgId, headerName) {
  $ocLazyLoad.load({
      name: 'emailSettingsModule',
      files: ['/doc/jsp/portal/viewMessageSettings.js']
  }).then(function() {
      var url = makeURL("/doc/jsp/portal/viewMessageSettings.jsp?");
      $scope.dataURL = url;
  }, function(e) {
      console.log(e);
  });
}

JSP where I have implemented ck editor

<div class="col-sm-11 nopadright" ng-if="showckeditor">
   <textarea ng-model="$parent.msgTypeBody" ck-editor insert-tag="strTagName" height="ckEditorheight" extra-plugins= "strTagName"></textarea> 
  </div>

Thanks..

Could you please refer the mentioned link and try adding to your code https://stackoverflow.com/a/23667151/2633945 — vickisys, Oct 23 '17 at 17:56

score 0 · Answer 1 · answered Oct 23 '17 at 18:00

$.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()
        }
    })
};

George Beier · Answer 2 · 2020-02-20T21:44:44.367

I'm using BS4 and ckEditor and ran into the same issue in IE (but not Edge, Chrome, FF, etc.) -- the drop down flashes and then disappears. It seems that the modal was hijacking the event. I tried the solution of the OP but it didn't work for me. Here's what did work -- after loading the BS script and the CK editor script, show the dialog in Bootstrap (this is critical --you have to have the dialog created or created/shown). Then --

$.fn.modal.Constructor.prototype._enforceFocus = function () {
        modal_this = this
        $(document).on('focusin.bs.modal', function (e) {

            if (e.target.className == "cke_panel_frame") {
                $(e.target).focus();
            }
        })
    };

I'm using BS4, so it's "focusin.bs.modal", not "focusin.modal". The drop down lists are all in the ck_panel_frame. So, when that frame has focus, I set the focus right back on the frame so that it doesn't get trapped by the modal itself.

Ckeditor drop down issue on Bootstrap modal (Open and close immediately on click)

2 Answers2