Vue3集成quillEditor：打造轻量级富文本编辑器的完整指南

最新推荐文章于 2026-04-17 10:03:00 发布

原创

最新推荐文章于 2026-04-17 10:03:00 发布 · 443 阅读

1. 为什么选择 QuillEditor 与 Vue3？

如果你正在用 Vue3 开发一个需要用户输入复杂内容的后台管理系统、博客编辑器或者社区发帖功能，那么一个靠谱的富文本编辑器几乎是刚需。市面上编辑器很多，从功能巨无霸的 TinyMCE、CKEditor，到追求极简的 Markdown 编辑器，选择起来确实头疼。

我试过不少，最后在 Vue3 项目里稳定用下来的，还是 QuillEditor。为什么是它？首先，它真的足够轻量。这里的“轻量”不是说功能弱，而是它的核心设计很优雅，模块化做得特别好。你不需要一个庞大的、把所有功能都打包好的“全家桶”，而是可以像搭积木一样，只引入你需要的工具栏按钮和功能模块。这意味着最终打包到你的项目里的代码体积会小很多，对前端性能非常友好。

其次，它的API设计非常直观和现代，和 Vue3 的响应式理念配合起来特别顺手。你不用去记一堆复杂的方法名和回调，大部分交互通过 v-model 或者事件监听就能轻松搞定。这对于我们开发者来说，学习成本和维护成本都降低了。

最后，也是很重要的一点，它的社区生态和文档都相当成熟。虽然原生的 Quill.js 是一个独立的库，但在 Vue 生态中，已经有维护得非常棒的封装版本，比如我们接下来要重点使用的 @vueup/vue-quill。这个库专门为 Vue 3 设计，完美支持 Composition API 和 <script setup> 语法，用起来就像在使用一个原生的 Vue 组件一样自然，几乎没有“缝合”的痕迹。

所以，总结一下，在 Vue3 项目里选 QuillEditor，图的就是一个“省心”：配置灵活、集成简单、性能可控。接下来，我就带你从零开始，一步步把它集成到你的项目中，并搞定那些实际开发中一定会遇到的功能定制和问题。

2. 5分钟完成基础安装与全局注册

万事开头难？在这里一点都不难。集成 QuillEditor 的第一步，简单到超乎想象。我们从头开始，确保每一步你都能跟上。

2.1 安装核心依赖

打开你的终端，进入 Vue3 项目目录，执行下面这条命令。这里我强烈建议使用 pnpm，因为它更快、更节省磁盘空间，当然你用 npm 或 yarn 也完全没问题。

pnpm add @vueup/vue-quill

这条命令会安装专为 Vue 3 打造的 Quill 编辑器组件库。安装完成后，你还需要它的核心样式文件。Quill 提供了几种主题，最常用的是 snow（雪）主题，也就是我们常见的那个带有工具栏和气泡菜单的样式。我们把它也引进来。

2.2 在项目中全局引入

为了让编辑器在项目的任何组件里都能直接使用，我们通常在入口文件（比如 main.js 或 main.ts）里进行全局注册。这样做的好处是，你不需要在每个页面里都重复 import 组件。

打开你的 src/main.js 文件，按照下面的代码进行修改：

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 QuillEditor 组件
import { QuillEditor } from '@vueup/vue-quill'
// 2. 引入 Quill 的雪主题样式，这是编辑器视觉呈现的核心
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const app = createApp(App)

// 3. 将 QuillEditor 注册为全局组件，并命名为 'QuillEditor'
app.component('QuillEditor', QuillEditor)

app.mount('#app')

这几行代码做了三件事：第一，把编辑器组件本身引进来；第二，把编辑器的皮肤（CSS样式）引进来；第三，告诉 Vue 应用：“喂，以后在任何地方看到 <QuillEditor> 这个标签，指的就是我刚引进来的这个组件”。这样一来，你在任何一个 .vue 文件里，都可以直接使用 <quill-editor> 标签了，就像使用 <div> 一样方便。

2.3 在组件中首次使用

全局注册之后，我们来创建一个最简单的编辑器看看效果。新建一个组件，比如 MyEditor.vue，写入以下代码：

<template>
  <div class="editor-container">
    <h3>我的第一个富文本编辑器</h3>
    <!-- 直接使用全局注册的组件 -->
    <quill-editor v-model:content="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 使用 ref 创建一个响应式的数据，用来绑定编辑器内容
const content = ref('<p>你好，世界！从这里开始你的创作...</p>')
</script>

<style scoped>
.editor-container {
  max-width: 800px;
  margin: 20px auto;
}
</style>

保存文件，然后在你的路由或父组件里引入这个 MyEditor 组件，运行项目。如果一切顺利，你应该能在页面上看到一个功能完整、带有工具栏的富文本编辑器了，并且里面已经预设了一段文字。这个 v-model:content 的用法是 @vueup/vue-quill 提供的，它实现了双向绑定，当你在编辑器里输入时，content 变量的值会自动更新；反之，你修改 content 的值，编辑器里的内容也会同步变化。是不是非常简单？