如何仅在客户端在 Vue.js 3 中动态导入 CKEditor？

Question

我正在尝试将CKEditor 5包含在我的 Vue.js 3 应用程序中，但我正在努力将其仅包含在客户端。 我正在使用服务器端渲染，它无法处理window使用的 window，因此它只能在浏览器请求时才加载，而不是 Node.js。

在 setup() 方法中，我可以像这样测试IsBrowser ：

const IsBrowser = typeof window !== 'undefined';

仅当IsBrowser为 true 时，如何执行import和初始化组件？

我必须执行以下代码才能使 CKEditor-5 工作：

    <CKEditor v-if="IsBrowser" id="PostContent" class="ck-content" contenteditable="true" :editor="CKEditorInline" ></CKEditor>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue/dist/ckeditor'
    import CKEditorInline from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
    
    export default {
    
      name: "ComponentCreate",
      components: {
        CKEditor: CKEditor.component
      }, 
    data() {
    return {
      CKEditorInline: CKEditorInline,
</script>

Answer 1

TLDR

工作解决方案（解释如下）：

<CKEditor v-if="IsBrowser && CKEditorInline"
  id="PostContent"
  class="ck-content"
  contenteditable="true"
  :editor="CKEditorInline"
></CKEditor>

<script>
import { ref, defineAsyncComponent } from 'vue';

export default {
  name: "ComponentCreate",
  components: {
    CKEditor: defineAsyncComponent(() => {
      return import('@ckeditor/ckeditor5-vue/dist/ckeditor')
      .then(module => module.component)
    })
  },
  setup() {
    const IsBrowser = typeof window !== 'undefined';
    let CKEditorInline = ref(null);

    if (IsBrowser) {
      import('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
      .then(e => CKEditorInline.value = e.default)
    }

    return { IsBrowser, CKEditorInline }
  },
};
</script>

---

这里有两个挑战：

1. 有条件地加载<CKEditor>组件
2. 有条件地加载CKEditorInline模块的导出

有条件地加载<CKEditor>组件

使用defineAsyncComponent延迟加载和注册组件。 如果模板实际呈现它，它只会加载和注册。 所以只有当v-if为真时。

components: {
  CKEditor: defineAsyncComponent(() => {
    return import('@ckeditor/ckeditor5-vue/dist/ckeditor')
    .then(module => module.component)
  })
},

^{在您的情况下，需要额外的挑战，而不是模块，而是component属性}

有条件地加载CKEditorInline模块导出

对于这个动态模块，我们想要默认导出

let CKEditorInline = ref(null);
if (IsBrowser) {
  import('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
  .then(e => CKEditorInline.value = e.default)
}

改变v-if条件

<CKEditor v-if="IsBrowser && CKEditorInline" :editor="CKEditorInline"></CKEditor>