首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CKEditor 5链接弹出窗口在引导程序4模式中不显示

CKEditor 5链接弹出窗口在引导程序4模式中不显示
EN

Stack Overflow用户
提问于 2020-12-08 14:44:54
回答 1查看 512关注 0票数 0

我设计了一些Bootstrap4Modal,我在里面实现了CKEditor 5。我的问题是当我试图打开链接时,链接弹出窗口不显示。我在谷歌上搜索了一下,找到了一些修复方法,但仍然没有像预期的那样工作。

我用过这个css代码,但它只显示弹出窗口。而且它也只适用于单一模式,而不是所有模式。

代码语言:javascript
运行
复制
.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",然后添加了它的工作模式,但只有一种模式,而不是所有模式。

这是我的页面This is the page

这是我的添加模式Add modal

在同一页面上编辑模态Edit modal on the same page

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

这就是我初始化CKEditor的方式

代码语言:javascript
运行
复制
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模式

代码语言:javascript
运行
复制
<!-- 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 -->

EN

回答 1

Stack Overflow用户

发布于 2021-09-26 18:07:22

我自己也有同样的问题。事实证明,链接弹出窗口停留在Bootstrap模式之后,原因是x-index样式。我添加了

代码语言:javascript
运行
复制
.ck-body-wrapper{
    z-index: 10000;
}

我的syles中的代码片段

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65194271

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档