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

第一步：安装

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

1. npm install @vueup/vue-quill@latest --save
2. # 或者
3. yarn add @vueup/vue-quill@latest

复制代码

第二步：完成配置

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

1. export default defineNuxtConfig({
2.   css: [
3.     // quill富文本
4.     'quill/dist/quill.snow.css',
5.     'quill/dist/quill.bubble.css',
6.     'quill/dist/quill.core.css',
7.   ],
8.   plugins: [
9.     // quill富文本
10.     {
11.       src: '~/plugins/nuxt-quill-plugin.js',
12.       ssr: false //仅在客户端渲染
13.     },
14.   ]
15. })

复制代码

如下图所示：

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

1. import Vue from "vue";
2. let VueQuillEditor;
3. if (process.browser) {
4.   VueQuillEditor = require("vue-quill-editor/dist/ssr");
5. }
7. 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文件，文件内容如下：

1. <template>
2.    
3.         <client-only>
4.             <QuillEditor theme="snow" :options="options" :content="content" contentType="html" />
5.         </client-only>
6.    
7. </template>

复制代码

注意：一定要用nuxt.js的包裹

第四步：引用组件

如下代码所示：

1. <template>
2.   
3.         <MyEditor :content="content" />
4.   
5. </template>

复制代码

至此，就完成了

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

谢谢分享，试用一下