Nuxt.js v4中使用quill富文本组件

第一步：安装

使用包管理器 npm 或 yarn来安装 VueQuill。

npm install @vueup/vue-quill@latest --save
# 或者
yarn add @vueup/vue-quill@latest

第二步：完成配置

（1）打开nuxt.js的nuxt.config.ts配置文件，添加如下配置：

export default defineNuxtConfig({
  css: [
    // quill富文本
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css',
  ],
  plugins: [
    // quill富文本
    {
      src: '~/plugins/nuxt-quill-plugin.js',
      ssr: false //仅在客户端渲染
    },
  ]
})

如下图所示：

（2）在nuxt.js的app目录下新建plugins文件夹，在该文件夹下新建nuxt-quill-plugin.js文件，nuxt-quill-plugin.js文件内容如下：

import Vue from "vue";
let VueQuillEditor;
if (process.browser) {
  VueQuillEditor = require("vue-quill-editor/dist/ssr");
}

Vue.use(VueQuillEditor);

注意：编译器可能会报警告： WARN Plugin E:/xxxxx/app/plugins/nuxt-quill-plugin.js has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin. ,建议无视它。

第三步：封装MyEditor.vue富文本组件

在在nuxt.js的app目录下的components文件夹中新建MyEditor.vue文件，文件内容如下：

<template>
    <div>
        <client-only>
            <QuillEditor theme="snow" :options="options" :content="content" contentType="html" />
        </client-only>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill';
const props = defineProps({
    content: {
        type: String,
        default: ""
    }
})


const options = {
    readOnly: false,
    placeholder: '请输入内容',
    theme: 'snow',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],               // 标题自定义按钮值
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],   // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标或下标
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
            [{ 'direction': 'rtl' }],                         // 文本方向
        ]
    }
}

</script>

<style lang="scss" scoped></style>

注意：一定要用nuxt.js的<client-only>包裹<QuillEditor>

第四步：引用组件

如下代码所示：

<template>
  <div>
 	<MyEditor :content="content" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const content = ref("<h2>这是文本标题内容</h2>")
</script>

<style scoped>

</style>

至此，就完成了