Vue整合富文本编辑器

在项目开发的过程中难免会遇到一些需要编辑器的需求，如博客文章的编写等等，接下来就让我们来实现该功能

1.Vue整合Quil

Quill是一个流行的富文本编辑器，用于在网页应用程序中创建和编辑富文本内容。它提供了丰富的功能，使用户可以在网页上以类似于常见文字处理软件的方式编辑文本，包括格式化文本、插入图片、创建列表、调整样式等功能。

Quill是一个开源项目，它提供了易于集成到网站和应用程序中的API和工具，使开发者能够将高度可定制的富文本编辑功能集成到他们的应用程序中。它使用JavaScript编写，提供了灵活的配置选项，允许开发者根据自己的需求和设计风格进行定制。

因为其易用性和灵活性，Quill被广泛应用于许多网站和Web应用程序中，用于创建和编辑富文本内容，为用户提供更好的编辑体验。

官网：Quill - Your powerful rich text editor

但是Quill并没有适配Vue,所以需要用到VueQuill

1.1整合VueQuill 

VueQuill是一个基于Vue.js框架的Quill富文本编辑器的封装组件。它将Quill富文本编辑器集成到Vue.js应用程序中，简化了在Vue项目中使用Quill的过程。

VueQuill允许开发者更容易地在Vue.js项目中使用Quill编辑器，并且提供了更加Vue友好的方式来管理和控制富文本编辑器。它提供了一些Vue.js组件，使得在Vue项目中引入和使用Quill变得更加方便和灵活。

官网：VueQuill | Rich Text Editor Component for Vue 3

使用方法：

1.使用包管理器npm或者故事安装VueQuill。

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

2.在vue项目中引入VueQuill依赖

2.1全局引入

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)

2.2局部引入

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

export default {
  components: {
    QuillEditor
  }
}

2.3在页面使用VueQuill编辑器

<template>
  <QuillEditor theme="snow" />
</template>

重新刷新就能加载出该编辑器

下一章我将介绍如何自定义工具栏和样式就先到这里了，我将持续更新，拜拜