Nuxt3：如何正确配置 CKEditor 5

Question

任何人都知道我如何在 nuxt3 应用程序中正确配置 CKEditor-5。我正面临您可以在下面看到的问题。我也会提供代码实现。

这是我目前的实现

<template>
  <div
    class="field"
    :class="{ 'form-group--error': props.error, active: text.length !== 0 }"
  >
    <CKEditor
      v-model="text"
      dir="rtl"
      :editor="ClassicEditor"
      :config="config"
      :tag-name="props.tagName"
      :disabled="props.disabled"
      @input="$emit('input', text)"
    />
    <label class="required" :placeholder="props.label">{{ props.label }}</label>
  </div>
</template>

<script setup>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import "@ckeditor/ckeditor5-build-classic/build/translations/ar";

const props = defineProps({
  value: { type: String, required: false, default: "" },
  tagName: { type: String, required: false, default: "div" },
  disabled: { type: Boolean, required: false },
  uploadUrl: { type: String, required: false, default: "" },
  label: { type: String, required: false, default: "" },
  error: { type: Boolean, default: false },
});

const config = ref({
  language: "ar",
});
const text = ref("");

watch(props.value, () => {
  text.value = props.value;
});
</script>

它会给出这个错误。如果是的话，我是否需要为此创建一个 nuxt3 插件，请告诉我怎么做。

Answer 1

尝试将您的 CKEditor 组件包装在

<client-only>

标签内。这对我有用。 作为参考，这个问题：How to use CKEditor with Nuxt.js - window is not defined error