如何在Bootstrap Modal中使用CKEditor？

Question

如果我在基于Bootstrap模板的HTML页面中使用CKEditor插件，它运作得很好。但是，如果我像这样在Bootstrap Modal中插入编辑器

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

- Max

---

请看这个例子：http://jsfiddle.net/7zDay/ - Max

可能是Bootstrap与CKEditor结合出现问题的重复问题。 - BENARD Patrick

这个答案提供了一个更好的解决方案，适用于更多的对话框。 - Reinmar

Answer 1

这应该会有所帮助 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。

- Pavel Kovalev

---

不知道这是做什么的，但它解决了我的问题！英雄。 - Will

可以正常工作！只需创建一个单独的文件，在jQuery和Bootstrap脚本之后包含它即可。帮助我节省了时间和精力！ - Akima

这对我没有用。要查看另一个通用解决方案，请访问https://dev59.com/0I3da4cB1Zd3GeqP0n3K。 - pinaki

救了我！+1 谢谢！ - Joshua - Pendo

哇，这是我在搜索了一个小时后找到的唯一有效的解决方案。谢谢！ - afollestad

Answer 2

这个回答有点晚，但是通过CSS技巧可以解决这个问题。

Bootstrap模态框的默认z-index是10051，而CKEditor对话框的默认z-index是10010。这个技巧只需要将CKEditor对话框的z-index增加即可。请在您的CSS文件中添加以下代码：

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

- Hossein Shahsahebi

---

对我来说还不够。我需要同时更改.cke_dialog和.cke_dialog_background_cover的Z-index。 - Meloman

Answer 3

请参考aaronsnow在ckeditor论坛对这个帖子的回复： http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap 他已经提供了代码。只需将代码放入js文件中，并确保您在jquery和bootstrap之后包含该文件。

- peterb

---

// 修复当ckeditor出现在bootstrap模态对话框中时的兼容性问题 // 在jQuery和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() } }) }; - Craig Gjerdingen

Answer 4

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

谢谢！

- Chandra Kumar

Answer 5

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

- BilgiSoft

Answer 6

只需打开 ckeditor 文件中的 /core/config.js，然后更改 "baseFloatZIndex" 变量即可。

baseFloatZIndex = 10000

到

baseFloatZIndex = 20000

它会改变您的编辑框和弹出窗口的起始“z-index”。

- Chic Theme

Answer 7

我只是从对话框主要div元素中删除了tabindex =“-1”。以下是示例代码

<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

我只是移除了这个

tabindex="-1"

并且它开始工作。

- t4taurus

Answer 8

如果有人遇到这个问题，我解决它的方法是从bootstrap模态框标签中删除tabindex="-1"。

- Mikael

Answer 9

我遇到了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()
        }
    })
};

- Mohd Abdul Mujib

Answer 10

将以下CSS添加到您的代码中，以设置与对话框容器相关联的.cke_dialog_container z-index。

.cke_dialog_container 
{
    z-index: 20000
}

对于模态框，我使用了类似于已经回答过的帖子中所给出的内容：

$("#createLot").on("show.bs.modal", function() {
        $(this).removeAttr('tabindex');
    })

这解决了我在链接点击时弹出对话框的问题。

- kshitij

---

这是正确的答案，我们可以从HTML中删除tabindex，无需使用jQuery，但你发现得很好。 - Mian Almas