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>
<client-only>
<QuillEditor theme="snow" :options="options" :content="content" contentType="html" />
</client-only>
</template>注意：一定要用nuxt.js的包裹
第四步：引用组件
如下代码所示：
<template>
<MyEditor :content="content" />
</template>至此，就完成了
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 谢谢分享，试用一下 热心回复！ 谢谢分享，辛苦了 感谢分享，下载保存了，貌似很强大 新版吗？好像是停更了吧。 前排留名，哈哈哈 收藏一下 不知道什么时候能用到 很好很强大我过来先占个楼 待编辑 收藏一下 不知道什么时候能用到 分享、互助 让互联网精神温暖你我 前排留名，哈哈哈 用心讨论，共获提升！ 很好很强大我过来先占个楼 待编辑 谢谢分享，试用一下 感谢，下载保存了 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 鼓励转贴优秀软件安全工具和文档！ 感谢发布原创作品，程序园因你更精彩 感谢分享
页:
[1]
2