在nuxt3中，我尝试使用Quill富文本编辑器。当我运行项目的主要或索引文件是正确打开，但当我试图打开包含羽毛笔编辑器的页面时，它显示错误“文档未定义”
here is the photo of error
下面是RichTextEditor代码

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ref, computed } from "vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    text: {
        type: String,
        default: "",
    },
    styleP: {
        type: String,
        default: "",
    },
});

const quillEditorRef = ref(null);

const toolbarOptions = [
    [{ direction: "rtl" }],
    [{ size: ["small", false, "large", "huge"] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }],
    [{ header: 1 }, { header: 2 }],
    [{ color: [] }, { background: [] }],
    ["bold", "italic", "underline", "strike"],
    [{ script: "sub" }, { script: "super" }],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ align: [] }],
    [{ indent: "-1" }, { indent: "+1" }],
    ["blockquote"],
    ["image", "video", "link"],
    ["code-block"],
    ["clean"],
];

const emit = defineEmits(["update:modelValue", "update:text"]);

const data = ref("");

watchEffect(() => {
    data.value = props.modelValue;
});

watchEffect(() => {
    emit("update:modelValue", data.value);
    if (quillEditorRef?.value?.getText()) {

        emit("update:text", quillEditorRef?.value?.getText());
    }
});

console.log(props.modelValue, " : model");
</script>

<template>
    <div>
        <QuillEditor style="min-height: 30vh" theme="snow" :toolbar="toolbarOptions" content-type="html"
            v-model:content="data" ref="quillEditorRef" :style="props.styleP" />
    </div>
</template>

字符串
下面是我调用RichTextEditor组件的页面i的代码

<template>
    <div>
        <RichTextEditor />
    </div>
</template>

<script>
import RichTextEditor from "@/components/AfterAuth/Blog/RichTextEditor.vue"
</script>

型
以下是package.json文件代码

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@iconify/vue": "^4.1.1",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/tailwindcss": "^5.3.5",
    "@pinia/nuxt": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@types/chart.js": "^2.9.37",
    "autoprefixer": "^10.4.14",
    "nuxt": "3.5.1",
    "postcss": "^8.4.23",
    "sass": "^1.57.0",
    "tailwindcss": "^3.3.1"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^3.0.4",
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@headlessui/vue": "^1.4.2",
    "@jridgewell/sourcemap-codec": "^1.4.14",
    "@mdi/js": "^7.0.96",
    "@rollup/plugin-inject": "^5.0.2",
    "@rollup/plugin-terser": "^0.2.0",
    "@vueup/vue-quill": "^1.2.0",
    "aws-amplify": "^5.0.5",
    "jquery": "^3.6.4",
    "numeral": "^2.0.6",
    "owl.carousel": "^2.3.4",
    "paper": "^0.12.17",
    "pinia": "^2.0.35",
    "readable-stream": "^4.2.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "tw-elements": "^1.0.0-beta2",
    "uuid4": "^2.0.3",
    "vue": "^3.2.33",
    "vue-number-animation": "^1.1.2"
  }
}

型
需要一个解决方案在紧急的基础上感谢
我试过解决办法，但没有奏效

<template>
    <ClientOnly fallback-tag="div" fallback="Loading editor...">
        <QuillEditor theme="snow" />
    </ClientOnly>
 </template>

型
全局安装插件

import { defineNuxtPlugin } from '#app';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineNuxtPlugin((nuxtapp) => {
  nuxtapp.vueApp.component('QuillEditor', QuillEditor)
})

型
当我尝试运行时，我希望RichTextEditor会显示，但错误显示