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..

Cathexis

What version of bootstrap are you using? – Acerbate

@Acerbate Bootstrap v3.2.0 – Cathexis

Any live page from your site to check it? – Decalcify

Could you please refer the mentioned link and try adding to your code https://mcmap.net/q/513554/-how-to-use-ckeditor-in-a-bootstrap-modal – Acerbate

Answer 1

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

Acerbate

Answer 2

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.

Christensen