如何僅在客戶端在 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>