我设计了一些Bootstrap4Modal,我在里面实现了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"
,然后添加了它的工作模式,但只有一种模式,而不是所有模式。
这是我的页面This is the page
这是我的添加模式Add modal
在同一页面上编辑模态Edit modal on the same page
我在另一个页面上有另一个模式。
这就是我初始化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模式
<!-- 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">×</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 -->
发布于 2021-09-26 18:07:22
我自己也有同样的问题。事实证明,链接弹出窗口停留在Bootstrap模式之后,原因是x-index样式。我添加了
.ck-body-wrapper{
z-index: 10000;
}
我的syles中的代码片段
https://stackoverflow.com/questions/65194271
复制相似问题