Question

我正在构建Vue.js Web应用程序。我正在以放置在模式窗口内的形式使用CKEditor。通过设计，用户的焦点被“困在”了模态中。在CKEditor中，当用户单击工具栏上的“链接”图标时，编辑器将打开一个对话框，并将新的DOM元素附加到“ document.body”。关于DOM，“链接”对话框现在不在捕获的焦点之内。用户无法单击或选择指向“链接”对话框输入的方式。

我挖掘了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" />

Answer 2

自从您打开此问题以来，可能要花很多时间。但是...这个问题也发生在我身上。发生这种情况是因为Bootstrap模态将焦点锁定在活动模态中。如果您使用的是bootstrap-vue，请执行此操作。

在您的<b-modal>中添加道具no-enforce-focus。

no-enforce-focus是反应性的。要正确应用此变通办法，您可以将此prop与变量一起使用，该变量检测CKeditor何时具有焦点。如果有焦点，请禁用强制焦点。如果没有，请还原它。您可以通过以下方式应用它：

<template>
    <b-modal
     ...
     :no-enforce-focus="editorFocus">
    <ckeditor
     ...
     @focus="toggleEditorFocus(true)"
     @blur="toggleEditorFocus(false)"
    />
    </b-modal>
</template>

<script>
export default {
 ...
 data () {
  return {
   editorFocus: false
  }
 },
 methods: {
   toggleEditorFocus (val = !this.editorFocus) {
   setTimeout(() => {
     this.editorFocus = val
   }, 10)
  }
 }
}
</script>

我知道setTimeout是一个棘手的方法，但至少现在对我有用。

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

2 个答案: