CKEditor 5 链接弹出窗口未在 Bootstrap 4 Modal 中显示

Question

我在其中设计了一些 Bootstrap 4 Modal，并在其中实现了 CKEditor 5。我的问题是当我尝试打开链接时，链接弹出窗口不显示。 我在谷歌中搜索发现了一些修复，但仍然没有按预期工作。

我使用了这个CSS代码，但它只显示弹出窗口。而且它也只适用于单一模态，不适用于所有模态。

.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw.ck-balloon-panel_visible.ck-balloon-panel_with-arrow {
  z-index: 100009 !important;
}

我还在 bootstrap 4 模态中添加了

data-focus="false"

然后它可以工作，但仅在单个模态中而不是所有模态中。

这是我的页面

这是我的添加模式

在同一页面编辑模态

我在其他页面上还有另一个模式。

这就是我初始化 CKEditor 的方式

var allEditors = document.querySelectorAll(".editor");
for (var i = 0; i < allEditors.length; ++i) {
  ClassicEditor.create(allEditors[i], {
    toolbar: {
      items: ["heading", "|", "fontFamily", "bold", "italic", "underline", "link", "bulletedList", "numberedList", "fontSize", "|", "indent", "outdent", "alignment", "strikethrough", "subscript", "superscript", "fontBackgroundColor", "fontColor", "highlight", "horizontalLine", "|", "imageUpload", "imageInsert", "blockQuote", "insertTable", "mediaEmbed", "undo", "redo", "code", "codeBlock", "exportPdf", "htmlEmbed"],
    },
    language: "en",
    image: {
      toolbar: ["imageTextAlternative", "imageStyle:full", "imageStyle:side", "linkImage"],
    },
    table: {
      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells", "tableCellProperties", "tableProperties"],
    },
    licenseKey: "",
  })
    .then((editor) => {
      window.editor = editor;
    })
    .catch((error) => {
      console.error("Oops, something went wrong!");
      console.error("Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:");
      console.warn("Build id: ha29xos85yrd-s3u39n3nfb0l");
      console.error(error);
    });
}

这是我的 Bootstrap 4 Modal

<!-- Add new department modal start -->
<div class="modal fade" id="add_department_modal" data-focus="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="add_department_modal" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <form action="#" method="post" id="add_department_form" novalidate>
        <div class="modal-header bg-primary text-light">
          <h5 class="modal-title" id="add_department_modal">Add New Department</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body px-4">

          <div class="form-group">
            <label for="dep_title">Department Title</label>
            <input type="text" name="title" id="dep_title" class="form-control form-control-lg rounded-0" placeholder="Enter Department Title" required>
            <div class="invalid-feedback">Department title can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_slug">Department Slug</label>
            <input type="text" name="slug" id="dep_slug" class="form-control form-control-lg rounded-0" placeholder="Enter Department Slug" required>
            <div class="invalid-feedback">Department slug can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_content">Department Content</label>
            <textarea name="content" id="dep_content" class="form-control form-control-lg rounded-0 editor" placeholder="Write Department Content Here..." rows="5" required></textarea>
            <div class="invalid-feedback">Department content can't be blank!</div>
          </div>

          <div class="form-group">
            <label for="dep_status">Department Status</label>
            <select name="status" id="dep_status" class="form-control form-control-lg rounded-0" required>
              <option value="" selected disabled>--Select--</option>
              <option value="1">Public</option>
              <option value="0">Private</option>
            </select>
            <div class="invalid-feedback">Department status can't be blank!</div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-lg rounded-0" data-dismiss="modal">Close</button>
          <input type="submit" value="Save" class="btn btn-primary btn-lg rounded-0" id="add_department_btn">
        </div>

      </form>

    </div>
  </div>
</div>
<!-- Add new department modal end -->

Answer 1

我自己也有同样的问题。事实证明，由于 x-index 样式，链接弹出窗口停留在 Bootstrap 模式后面。我添加了

.ck-body-wrapper{
    z-index: 10000;
}

我的风格中的片段

Answer 2

为了让它在我的系统中工作，我遵循了 ckeditor docs 的指南。

To address the first issue, add the following styles to your application:

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

Pass the focus: false option to the Bootstrap modal() function to fix the second issue:

$( '#modal-container' ).modal( {
    focus: false
} );