Question

我在bootstrap模式中打开了ckeditor但是格式和大小下拉不能正常工作。当我点击大小或格式下拉它立即打开和关闭时，我读到它是ckeditor中的bootstrap模式的一个错误。我在网上找到了解决方案，但是没有用。

解决方案我在网上发现并且没有工作： -

    $.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编辑器：

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

我已经实现了ck编辑器的JSP

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

谢谢..

Answer 1

我正在使用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中。因此，当该框架具有焦点时，我将焦点重新设置在框架上，以使它不会被模态本身捕获。

关于Bootstrap模式的Ckeditor下拉问题（点击后立即打开和关闭）

2 个答案: