资讯详情

第一步：安装

使用包管理器 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的包裹

第四步：引用组件

如下代码所示：

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

至此，就完成了