Vue3集成Quill富文本编辑器完整指南

摘要：还在为Vue项目找一款强大的富文本编辑器？Quill.js作为轻量级但功能全面的选择，集成到Vue3中只需5步！下面分享实际项目验证的集成方案，解决中文配置、图片上传等高频痛点。

还在为Vue项目找一款强大的富文本编辑器？Quill.js作为轻量级但功能全面的选择，集成到Vue3中只需5步！下面分享实际项目验证的集成方案，解决中文配置、图片上传等高频痛点。

安装与环境准备（避开版本坑）

# 使用官方适配Vue3的封装（2023年更新）
npm install @vueup/vue-quill@latest quill@6.x

# 安装图片调整模块（解决图片缩放问题）
npm install quill-image-resize-module --save-dev

基础集成方案（含中文配置）

<template>
  <div class="editor-container">
    <!-- 关键：使用v-model双向绑定 -->
    <QuillEditor 
      v-model:content="htmlContent" 
      contentType="html"
      :options="editorOptions"
      @ready="onEditorReady"
    />
  </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

// 中文配置项（解决工具栏英文问题）
const editorOptions = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['image', 'link']
    ]
  },
  placeholder: '请输入内容...',
  theme: 'snow'
}

const htmlContent = ref('<p>初始内容</p>')

// 编辑器实例就绪回调
const onEditorReady = (quill) => {
  console.log('Quill实例:', quill)
}
</script>

图片上传实战（阿里云OSS方案）

// 在editorOptions中扩展图片处理
modules: {
  toolbar: {
    container: [['image']],
    handlers: {
      image: function() {
        const fileInput = document.createElement('input')
        fileInput.type = 'file'
        fileInput.accept = 'image/*'
        fileInput.click()
        
        fileInput.onchange = async () => {
          const file = fileInput.files[0]
          // 调用后端接口获取OSS上传凭证
          const { token, url } = await getOSSToken() 
          
          // 执行上传（伪代码）
          const result = await axios.put(url, file, {
            headers: { 'Content-Type': file.type }
          })
          
          // 获取CDN地址并插入编辑器
          const imageUrl = `https://cdn.yourdomain.com/${file.name}`
          const range = this.quill.getSelection()
          this.quill.insertEmbed(range.index, 'image', imageUrl)
        }
      }
    }
  }
}

高频踩坑解决方案

样式丢失问题

/* 强制覆盖Quill样式作用域 */
.editor-container :deep(.ql-container) {
  height: 400px;
  font-family: 'Microsoft YaHei';
}

自定义字体大小

// 在options中添加
modules: {
  toolbar: [
    [{ 'size': ['small', false, 'large', 'huge'] }]
  ]
}

内容XSS防护

// 安装DOMPurify
npm install dompurify

// 使用前过滤
import DOMPurify from 'dompurify'
const safeHtml = DOMPurify.sanitize(dangerousHtml)

性能优化技巧

异步加载组件（减少首屏体积）

<script setup>
import { defineAsyncComponent } from 'vue'
const QuillEditor = defineAsyncComponent(() => 
  import('@vueup/vue-quill').then(m => m.QuillEditor)
)
</script>

按需引入模块（节省50%体积）

// 在需要使用编辑器的页面动态加载
if (process.client) {
  import('quill/dist/quill.snow.css')
}

完整功能扩展建议

功能	推荐方案	优势
表格支持	quill-table-module	支持合并单元格
公式编辑	quill-formula	KaTeX集成
代码高亮	quill-syntax-highlighter	支持50+语言
粘贴格式化	quill-paste-smart	自动清理Word样式

常见问题排查

工具栏不显示？
→ 检查是否同时引入了snow.css主题样式

中文配置失效？
→ 确认未加载其他Quill实例覆盖配置

图片无法调整大小？
→ 检查是否注册了quill-image-resize-module

最佳实践：封装为可复用组件RichEditor.vue，通过props暴露配置接口，内部处理所有Quill相关逻辑

项目经验总结

数据存储：建议同时保存原始Delta对象和HTML内容

版本控制：锁定Quill版本（避免6.x到7.x的破坏性更新）

移动端适配：添加@touchstart事件防止键盘遮挡

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12764