如何在引导模式中使用 CKEditor？答案

【问题标题】：How to use CKEditor in a Bootstrap Modal?如何在引导模式中使用 CKEditor？
【发布时间】：2023-03-06 23:32:01
【问题描述】：

如果我在基于 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/

【问题讨论】：

看这个例子jsfiddle.net/7zDay
Bootstrap with CKEditor equals problems的可能重复
这个answer 提供了一个适用于更多对话框的更好解决方案。

标签： twitter-bootstrap modal-dialog ckeditor jqmodal

【解决方案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

【讨论】：

甚至不知道这是做什么的，但它解决了我的问题！英雄。
有效！只需创建一个单独的文件并将其包含在 jquery 和引导脚本之后。帮助我节省了时间和精力！
这对我不起作用。对于另一个通用解决方案检查stackoverflow.com/questions/31678662/…
救了我！ +1 谢谢！
哇，这是我在搜索一个小时后找到的唯一解决方案。谢谢！

【解决方案2】：

这是迟到的回答，但做 css 技巧将解决问题。

Bootstrap modal 的默认z-index 是10051，ckeditor 对话框的默认z-index 是10010。诀窍只是增加ckeditor对话框z-index，如下所示。将以下代码放入您的 css 文件中：

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

【讨论】：

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

【解决方案3】：

在 ckeditor 论坛上查看 aaronsnow 对此主题的回复： http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

他已经给出了密码。只需将代码放入 js 文件中，并确保在 jquery 和 bootstrap 之后包含该文件

【讨论】：

// 当 ckeditor 出现在引导模式对话框中时修复 ckeditor/bootstrap 兼容性错误 // 在加载 jQuery 和引导程序后包含此文件。 $.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() } }) };

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

谢谢！

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

只需在 ckeditor 文件中打开 /core/config.js 而不是更改“baseFloatZIndex”变量

baseFloatZIndex = 10000

到

baseFloatZIndex = 20000

它将更改编辑器框的开始“z-index”和弹出窗口。

【讨论】：

【解决方案8】：

添加此 css 以设置链接到对话容器的 .cke_dialog_container z-index

.cke_dialog_container 
{
    z-index: 20000
}

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

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

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

【讨论】：

这是正确的答案，我们可以从 html 中删除 tabindex，不需要用 jquery 来做，但是很好的捕获

【解决方案9】：

不知道，也许在我的版本中它已经修复了，但我的解决方案是：

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

【讨论】：

【解决方案10】：

一切都很简单：

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

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

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

【讨论】：

你能解释一下你的答案吗？
$('#message-modal').removeAttr('tabindex'); $('#message-modal').focusout(function(){ if($('.cke_dialog_background_cover').css('display')=='block'){ $(this).css({'position' :'relative'}); setTimeout(function(){ $('#message-modal').css({'position':'fixed'}); },10); } });
这个用于模式中的 CKEditor
TabIndex 阻止焦点字段。其他所有 css 位置

【解决方案11】：

这非常简短。从它们存储在您的应用程序中的路径导入 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来替换你的textarea

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>

【讨论】：

【解决方案12】：

我想我找到了一些解决方案。

正如@Pavel Kovalev 建议的那样，它与 boostraps 4 JS 和专注于模态脚本有关。我和你的问题一样。

模态框有一个选项称为“焦点”，它将焦点设置在初始化的模态框上。禁用此选项会使您在 CKEditors 模态中的所有输入都能正常工作。不关注这种模式我可以没有:)

在此处查看详细信息： https://getbootstrap.com/docs/4.3/components/modal/#options

在我的处理方法中，我最终得到了这样的结果：

<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>

对于一些更广泛的测试来说，这可能是个好主意，特别是如果您在一页上有多个带有 CKEditor 的引导模式。

至于所有的“修复”你可以在网上找到。看看他们最有可能指的是引导程序 3，其中模式上的事件不同，因此它们根本无法工作。包括@Pavel Kovalev 解决方案。

【讨论】：

【解决方案13】：

这对我有用 bootstrap 4.4 和 ckeditor 4.14。您需要做的就是在模态的shown.bs.modal 事件中初始化ckeditor。

$('#yourModal')
    .on('shown.bs.modal', (e) => {
        CKEDITOR.replace('editor')
});

工作就像一个魅力。

【讨论】：

【解决方案14】：

我只是从对话框主 div 元素中删除 tabindex="-1" 。这是示例代码

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

我只是删除了这个

tabindex="-1"

它开始工作了。

【讨论】：

【解决方案15】：

对于 Bootstrap 4，此行将不再工作。他们需要弄清楚它已更改为：

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

代替

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

所以，代码应该是这样的：

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

【讨论】：