web-dev-qa-db-ja.com

Bootstrap=モーダルでCKEditorを使用する方法？

Bootstrapテンプレートに基づくHTMLページで CKEditor プラグインを使用する場合、これは素晴らしい動作をしますが、Bootstrapこのようなモーダル

<!-- Modal --> 
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">   
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>
       </div>
       <div class="modal-body">
             <form>
             <textarea name="editor1" id="editor1" rows="10" cols="80">
             This is my textarea to be replaced with CKEditor.
             </textarea>            <script>
             CKEDITOR.replace('editor1');
             </script>
             </form> 
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
       </div>
     </div>   
   </div> 
</div>

エディターは動作しますが、リンクまたはイメージを追加しようとすると、エディターのポップアップウィンドウのすべてのフォームコントロールが無効になります。たとえば、入力が無効になっているため、URLまたは説明を挿入できません。

この問題の回避策はありますか？

これはフィドルの例です： http://jsfiddle.net/7zDay/

twitter-bootstrapmodal-dialogckeditorjqmodal
20
Max

これは役立つはずです http://jsfiddle.net/pvkovalev/4PACy/

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

2016年10月更新：

CKEditorのCDNリンクが変更されたため、jsfiddleを更新しました

50
Pavel Kovalev

これは答えるのが遅いですが、CSSトリックを行うことで問題は解決します。

デフォルト z-index of Bootstrap modal is 10051およびデフォルトz-index ckeditorダイアログの10010。秘Theは、以下のようにckeditorダイアログのz-indexを増やすことです。 cssファイルの以下のコードを配置します。

.cke_dialog
{
    z-index: 10055 !important;
}
4
Hossein Shahsahebi

Ckeditorフォーラムのこのスレッドに対するaaronsnowからの応答を参照してください。 http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

彼はコードを与えられました。 jsファイルにコードを入れて、jqueryとbootstrapの後にファイルを含めるようにしてください

3
peterb
  $(document).on({'show.bs.modal': function () {
                 $(this).removeAttr('tabindex');
      } }, '.modal');
1
BilgiSoft

Uncaught TypeError: Cannot read property 'fn' of undefined

だから私は$が提供するスクリプト内@Pavel Kovalev上からjQueryへ。

jQuery.fn.modal.Constructor.prototype.enforceFocus = function () {
    modal_this = this
    jQuery(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
        }
    })
};
1
Mohd Abdul Mujib

100％作業スクリプトを使用します。

<script type="text/javascript">
    // Include this file AFTER both jQuery and bootstrap 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_textarea')
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
          modal_this.$element.focus()
        }
      })
    };
</script>

ありがとう！

1
Chandra Kumar

すべて非常に簡単：

$('#modal').removeAttr('tabindex');

$('#modal').focusout(function(){
    $(this).css({'position':'relative'});
});

$('#modal').focusin(function(){
    $(this).css({'position':'fixed'});
});
0
Vova Batrakov

これは非常に短く簡単です。 CKEditor Javascript構成ファイルをアプリに保存されているパスからインポートします。これは私のものです

<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

この後、CKEditorを呼び出して、テキストエリアを置き換えることができます。

CKEDITOR.replace('topic', {
          uiColor: '#9AB8F3',
                            language: "en-us",
                            toolbar: "Custom",
          height: "200",
          width: "400",
                            skin: "moono",
                            toolbar_Custom: [
                                ["Bold", "Italic", "Underline"], 
                                ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"], 
                                ["Link", "Unlink"]
                            ],  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>


<!-- Modal --> 
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
        <div class="modal-dialog">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-content">
                <div class="user-box">
                    <h2>Create a new discussion</h2>
                    <form method="post" id="discussion_add" action="#">
                            <!--FORM FIELD START-->
                            <div class="form">
                                <div class="input-container">
                                    <input type="text" id="id_session" name="session" required="true">
                                </div>
                                <div class="input-container">
                                        <textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
                                </div>

                                <div class="input-container">
                                    <button class="btn-style">Create Discussion</button>
                                </div>
                            </div>
                        </form>                
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
<button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>
0
Transformer

Ckeditorファイルで/ core/config.jsを開くだけで、 "baseFloatZIndex"変数を変更できます

baseFloatZIndex = 10000

に

baseFloatZIndex = 20000

エディタボックスの開始 "z-index"とpopupsが変更されます。

0
Chic Theme

私のバージョンではすでに修正されているかもしれませんが、私の解決策は次のとおりです：

    $("#messageModal").on('shown.bs.modal', function() {
     CKEDITOR.replace('message', {
       height: '400px',
       width: '100%'
     });
   })
0
Koloritnij