如何让 CKEditor 5“链接”对话框固定到自定义 DOM 元素而不是“document.body”

Question

我正在构建一个 Vue.js Web 应用程序。我以放置在模式窗口内的形式使用 CKEditor。根据设计，用户的焦点被“困”在模式中。在 CKEditor 中，当用户单击工具栏中的“链接”图标时，编辑器将打开一个对话框并将新的 DOM 元素附加到“document.body”。对于 DOM，“链接”对话框现在位于捕获焦点之外。用户无法单击或按 Tab 键进入“链接”对话框输入。

我深入研究了ckeditor5-ui源代码并在balloonpanelview.js中找到了相关代码。我尝试基于 https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html配置 CKEditor 失败

在我的 Vue.js 组件中，我有：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
  data: () => ({
    editor: ClassicEditor,
    editorConfig: {
      toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
    },
    ...
  })
...

我希望将 CKEditor“链接”对话框 DOM 元素附加到我指定的 DOM 元素 id。

Answer 1

在 Vuetify 对话框组件中需要禁用保留焦点

<v-dialog :retain-focus="false" />