基于Bootstrap模态框的Ckeditor下拉菜单问题（点击打开和立即关闭）

Question

我在Bootstrap模态框中打开了Ckeditor，但是“格式”和“大小”下拉框不能正常工作。当我点击“大小”或“格式”下拉框时，它们会立即打开并关闭，我看到这是Ckeditor与Bootstrap模态框的一个bug。我在网上找到了解决方法，但它并未起作用。

我在网上找到的解决方案但不起作用：-

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

我从哪里调用jsp和CK编辑器的JS：

  $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中实现了ck编辑器

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

谢谢。

- pise

---

你使用的是哪个版本的Bootstrap？ - vickisys

@vickisys Bootstrap v3.2.0 - pise

{btsdaf} - Tarun Lalwani

{btsdaf} - vickisys

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

- vickisys

Answer 2

我正在使用BS4和ckEditor，在IE中遇到了相同的问题（但不是在Edge，Chrome，FF等中）-下拉菜单闪烁然后消失。似乎模态窗口劫持了事件。我尝试了OP的解决方案，但对我没有用。这是有效的解决方法-在加载BS脚本和CK编辑器脚本之后，在Bootstrap中显示对话框（这很关键-您必须创建或创建/显示对话框）。然后-

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

我正在使用BS4，所以应该是"focusin.bs.modal"，而不是"focusin.modal"。下拉列表都在ck_panel_frame中。因此，当该框架具有焦点时，我会立即将焦点放回该框架，以免被模态本身困住。

- George Beier