Vue/Vuetify中CKEditor链接按钮焦点异常问题求助

以下是几个适配业务需求的可行解决方案，无需调整输入框与编辑器的上下位置：

方案1：监听CKEditor对话框事件，手动指定焦点 #

利用CKEditor的对话框生命周期事件，在链接对话框打开后强制将焦点设置到对话框的URL输入框：

1. 给CKEditor组件添加ref以获取实例：

<ckeditor ref="ckEditor" :editor="ClassicEditor" ...></ckeditor>

2. 在组件mounted钩子中绑定事件：

mounted() {
  const editor = this.$refs.ckEditor.instance;
  editor.on('dialog:show', (event) => {
    const dialog = event.data;
    // 确认当前是链接对话框
    if (dialog.getName() === 'link') {
      // 延迟执行确保对话框DOM渲染完成
      setTimeout(() => {
        const urlInput = dialog.getContentElement('info', 'url').getInputElement();
        urlInput.focus();
      }, 100);
    }
  });
}

方案2：临时阻止上方输入框的焦点抢占 #

通过自定义指令，在链接对话框打开期间阻止v-text-field自动获取焦点：

1. 在组件内定义局部指令：

directives: {
  'prevent-focus': {
    bind(el, binding) {
      el._blockFocus = (e) => {
        if (binding.value) {
          e.preventDefault();
          e.stopPropagation();
        }
      };
      el.addEventListener('focus', el._blockFocus, true);
    },
    update(el, binding) {
      if (binding.value) {
        el.addEventListener('focus', el._blockFocus, true);
      } else {
        el.removeEventListener('focus', el._blockFocus, true);
      }
    },
    unbind(el) {
      el.removeEventListener('focus', el._blockFocus, true);
    }
  }
}

2. 模板中使用指令并绑定状态：

<v-text-field v-prevent-focus="isLinkDialogOpen" label="业务输入框" ...></v-text-field>
<ckeditor ref="ckEditor" ...></ckeditor>

3. 配合CKEditor事件控制状态：

data() {
  return {
    isLinkDialogOpen: false
  };
},
mounted() {
  const editor = this.$refs.ckEditor.instance;
  editor.on('dialog:show', (event) => {
    if (event.data.getName() === 'link') {
      this.isLinkDialogOpen = true;
    }
  });
  editor.on('dialog:hide', (event) => {
    if (event.data.getName() === 'link') {
      this.isLinkDialogOpen = false;
    }
  });
}

方案3：动态调整输入框tabindex属性 #

给v-text-field动态绑定tabindex，对话框打开时设置为-1（禁止自动焦点跳转），关闭后恢复正常：

<v-text-field :tabindex="isLinkDialogOpen ? -1 : 0" label="业务输入框" ...></v-text-field>

状态控制逻辑同方案2，该方式不影响用户手动点击输入框聚焦。

内容的提问来源于stack exchange，提问作者David Letkeman