CKEDITOR5工具栏链接项在UI对话框中不起作用

Question

我从另一个 UI 对话框调用 UI 对话框，以向第一个 UI 对话框中列出的用户发送电子邮件。

第二个 UI 对话框使用 Ckeditor 5 创建电子邮件的内容。

所有工具栏项都能完美运行，但单击链接图标时永远不会显示用于添加 URL 的下拉列表。

我在谷歌上花了很多时间，虽然我找不到完全相同的场景，但有几篇文章讨论了对话框和编辑器的焦点问题，主要是在 Bootstrap 中。

我试图摆弄给出的代码以适应我的场景，但没有任何效果。

有没有其他人遇到过这个问题，如果是这样，解决方案是什么。

提前致谢

Answer 1

我也在研究这个问题。我设法让气球显示 .ck-balloon-panel{z-index：9999 ！important}，但用于编写链接的文本框不可选择。

Answer 2

解决了它 - 添加了.ck-balloon-panel{z-index：9999 ！important}，以便它始终位于其他任何内容之前

Answer 3

这里有一个完整的例子。如果你在 React 中使用 MUI，你可以在你拥有 CKEditor 组件的组件中执行以下操作(这里我使用 React + NextJS + MUI 和 CKEditor DecoupledEditor(。请注意，我导入了 GlobalStyles 来覆盖 Link baloon zIndex。

import React from "react";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { Box } from "@mui/material";
import GlobalStyles from "@mui/material/GlobalStyles";
const inputGlobalStyles = (
<GlobalStyles
styles={{
".ck.ck-balloon-panel": {
zIndex: "1400 !important", // Put a higher value that your MUI Dialog (generaly 1300)
},
}}
/>
);
export default function YourTextEditor({ value, onChange }) {
let textEditor = null;
return (
<Box
sx={{
".ck-editor__editable_inline": {
height: "200px",
border: (theme) =>
theme.palette.mode === "light"
? "1px solid rgba(0, 0, 0, 0.20) !important"
: "1px solid rgba(200, 200, 200, 0.25) !important",
borderTop: "1px !important",
},
}}
>
{inputGlobalStyles}
<CKEditor
editor={DecoupledEditor}
config={{
toolbar: {
items: [
"bold",
"italic",
"underline",
"link",
"bulletedList",
"numberedList",
],
shouldNotGroupWhenFull: true,
},
}}
data={value}
onReady={(editor) => {
console.log("Editor is ready to use!", editor);
// Insert the toolbar before the editable area.
if (editor) {
editor.ui
.getEditableElement()
.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
textEditor = editor;
}
}}
onError={(error, { willEditorRestart }) => {
// If the editor is restarted, the toolbar element will be created once again.
// The `onReady` callback will be called again and the new toolbar will be added.
// This is why you need to remove the older toolbar.
if (willEditorRestart) {
textEditor.ui.view.toolbar.element.remove();
}
}}
onChange={(event, editor) => {
const data = editor.getData();
onChange(data);
}}
/>
</Box>
);
}

并且，在具有对话框的组件中，不要忘记将属性放在disableEnforceFocus.

return (
<Dialog onClose={props.onClose} open={props.open} disableEnforceFocus>...

Answer 4

尝试将模态设置为 false

$(function () {
$("#dialog-detail").dialog({
autoOpen: false,
height: 500,
width: 700,
modal: false,
buttons: {
}
});
});

Answer 5

这是我使用Jquery的解决方案。

.css：

.ck-balloon-panel{z-index:9998 !important}

Js：

$("#modalId").on("click", function(){
if($(".ck-balloon-panel").is(':visible') == true){
setTimeout(() => {
$(".ck-input_focused").focus()
}, 300);
}
})

希望帮助某人，问候！