13

CKEditorのインスタンスを含むブートストラップモーダルを作成しようとしていますが、多くの問題があります...

したがって、基本的にフィールドは無効のままにされ、そのようには見えませんが、私はそれらと対話することはできません。誰かがこの奇妙な行動の解決策を持っていますか？

4

9 に答える 9

27

FWIW、 Peterのソリューションを機能させることができませんでしたが、以下は私のために機能し、それでもハックを別のファイルに保持するため、Bootstrapソースファイルを編集する必要はありません。

// bootstrap-ckeditor-modal-fix.js
// hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
//
// Include this AFTER both bootstrap and ckeditor are loaded.

$.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()
    }
  })
};
于 2013-09-01T01:32:36.730 に答える
13

tabindexモーダルコンテナから属性を削除したところ、この問題は修正されたようです。

これはここで脂肪によって提案されました： https ：//github.com/twbs/bootstrap/issues/6996

于 2015-01-06T01:06:03.760 に答える
5

上記のすべての解決策がうまくいかない場合は、これを試してください：

   $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });

それはすぐに私のために働いた。ソースは次のとおりです：tobivの答え-github

于 2017-09-27T07:59:41.730 に答える
3

Bootstrapソースをいじる代わりに、フォーカスイベントハンドラーを再接続しました。

Bootstrap Modal（unminified）コードを調べて、Modal.enforceFocus（）の下でイベントハンドラーが定義されている場所を見つけました。

var that = this
$(document).on('focusin.modal', function (e) {
  if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
    that.$element.focus()
  }
})

次に、この関数を修正するメソッドをCKEditorに追加しました。これはどこにでも置くことができます。多分CKEditorオーバーライドのためだけのファイルに。

CKEDITOR.bootstrapModalFix = function (modal, $) {
  modal.on('shown', function () {
    var that = $(this).data('modal');
    $(document)
      .off('focusin.modal')
      .on('focusin.modal', function (e) {
        // Add this line
        if( e.target.className && e.target.className.indexOf('cke_') == 0 ) return;

        // Original
        if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
          that.$element.focus()
        }
      });
  });
};

したがって、ブートストラップモーダルでCKEditorをロードすることがわかっている場合は、jQueryが$次のようになっていると仮定して、このメソッドを呼び出します。

CKEDITOR.bootstrapModalFix( $('#myModal'), $ )
于 2013-05-31T20:42:42.643 に答える
1

ねえ、私はこれらの問題を抱えていました。このチケットhttps://github.com/twitter/bootstrap/issues/6996を見つけました。これにより、入力が選択できないという問題が修正されたようです。このチケットの変更を次のように拡張しました。

if (that.$element[0] !== e.target && !that.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')){

これにより、入力だけでなく選択も使用できるようになりますが、セレクターを繰り返すのは少し厄介ですが、バグは修正されます。これがお役に立てば幸いです。

于 2013-02-22T14:27:12.640 に答える
1

ブートストラップモーダルのz-indexは、ckeditorパネルのz-indexよりも高くなっています。だから私が見つけた別の解決策は、ckeditorのz-indexを増やすことでした。次の行をckeditorconfig.jsに追加します

// app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;
于 2016-04-27T10:43:04.450 に答える
1

React-BoostrapModalでCKEditorを使用しています。そして、WirisMathtypeエディターでフォーカスの問題に直面しました。私は私の問題を解決した2つの方法でこれを試しました。

モーダルコンポーネントがロードされたら、これをスクリプトの下に貼り付けます

document.getElementsByClassName('modal')[0].removeAttribute('tabindex')

また

この属性をモーダルコンポーネントに追加します

enforceFocus={false}
于 2021-04-26T08:48:42.867 に答える
0

実例はここにあります：http：//jsfiddle.net/pvkovalev/4PACy/ 

        $.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
                // add whatever conditions you need here:
                &&
                !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
                    modal_this.$element.focus()
                }
            })
        };
于 2014-05-15T00:04:29.930 に答える
0

ブートストラップはfocusin.modalをshowned.bs.modalに変更しました

 $.fn.modal.Constructor.prototype.enforceFocus = function() {
  modal_this = this
  $(document).on('shown.bs.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()
    }
  })
};

これは私のために働いています。

于 2016-03-31T21:25:05.680 に答える