Vue3使用富文本编辑器QuillEditor

乘风xs

已于 2023-04-04 20:37:43 修改

阅读量1.4w

点赞数 2

分类专栏：随笔杂记文章标签： vue quill 富文本编辑器

于 2021-04-09 15:44:37 首次发布

本文链接：https://blog.youkuaiyun.com/xaishujin/article/details/115552198

版权

随笔杂记专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Vue3项目中使用@vueup/vue-quill作为富文本编辑器。通过安装配置步骤说明，帮助开发者快速上手。支持多种主题样式，提供丰富API以满足不同需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-quill-editor似乎对于vue3没有较好支持，或者是我水平太差不会用。这里推荐使用vue-quill。官网地址https://vueup.github.io/vue-quill/guide/usage.html#in-single-file-component

1、安装。在控制面板中查找依赖，@vueup/vue-quill进行安装，即下图中的第2个。或者使用命令行进行安装

npm install @vueup/vue-quill@alpha --save

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hhaXNodWppbg==,size_16,color_FFFFFF,t_70

2.配置。在main.js文件中按如下方式导入

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

const app = createApp()
app.component('QuillEditor', QuillEditor)

或者在需要使用的组件文件中导入

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

export default {
  components: {
    QuillEditor
  }
}

3.在vue文件中使用。