'# Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义
一、背景与问题
在现代Web开发中，富文本编辑器是常见需求。传统的<textarea>无法满足复杂的文本排版需求，而vue-quill-editor作为基于Quill.js的Vue封装组件，提供了强大的富文本编辑能力。然而在实际开发中，我们常遇到以下问题：
- 图片插入时需要自定义上传逻辑：默认的图片上传功能无法满足业务需求，如需要对接第三方图床、校验图片格式等
- 编辑器内容与后端接口的数据结构不匹配：需要处理HTML转义、特殊字符转义等问题
- 跨域问题和安全风险：直接暴露上传接口可能导致XSS攻击
本文将深入探讨如何在Vue项目中使用vue-quill-editor实现图片自定义上传功能，并分析其工作原理和最佳实践。
二、基本原理
vue-quill-editor基于Quill.js构建，其核心原理包括：
- 模块化架构：Quill通过模块系统实现功能扩展，每个模块负责特定功能（如文本处理、格式化、图片插入等）
- Blot系统：Quill的DOM节点系统，通过Blot类定义不同类型的节点（如文本节点、图片节点）
- 事件驱动：通过监听
'change'、'selection-change'等事件实现交互控制 - 自定义模块开发：通过继承
Quill的模块类，可以实现自定义功能（如图片上传）
三、环境准备
安装依赖：
npm install vue-quill-editor --save npm install quill --save引入样式：
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css'基础项目结构：
src/ ├── components/ │ └── RichTextEditor.vue ├── assets/ │ └── upload.png ├── utils/ │ └── quillUtils.js └── App.vue
四、核心实现
1. 初始化富文本编辑器
<template>
<div>
<quill-editor
v-model="content"
:options="editorOptions"
@blur="onBlur"
@focus="onFocus"
></quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
export default {
components: { quillEditor },
data() {
return {
content: '',
editorOptions: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
[{'header': [1, 2, 3, 4, 5, 6, false]]},
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}],
['clean'],
['link', 'image', 'video']
]
}
}
}
}
}
</script>关键点：
- 使用
v-model双向绑定内容 - 配置
toolbar模块自定义功能 - 使用
@blur和@focus事件处理焦点变化
2. 自定义图片插入逻辑
// utils/quillUtils.js
import Quill from 'quill'
export default {
initQuill(editor) {
const toolbar = editor.getModule('toolbar')
toolbar.addHandler('image', this.handleImage)
},
handleImage(file) {
const reader = new FileReader()
reader.onload = (e) => {
this.uploadImage(e.target.result).then(url => {
this.insertImage(url)
}).catch(err => {
console.error('图片上传失败:', err)
})
}
reader.readAsDataURL(file)
},
uploadImage(dataUrl) {
// 实际开发中应替换为真实上传接口
return new Promise((resolve, reject) => {
setTimeout(() => {
// 模拟上传成功
const url = `https://example.com/images/${Math.random()}.jpg`
resolve(url)
}, 1000)
})
},
insertImage(url) {
const editor = this.quill
editor.insertEmbed(editor.getSelection().index, 'image', url)
}
}关键点：
- 重写
image按钮的点击事件 - 使用
FileReader读取文件内容 - 模拟上传过程并返回图片URL
- 使用
insertEmbed方法插入图片
3. 图片上传状态处理
<template>
<div>
<quill-editor
v-model="content"
:options="editorOptions"
@blur="onBlur"
@focus="onFocus"
>
<div slot="toolbar">
<button @click="customImageUpload">自定义图片上传</button>
</div>
</quill-editor>
<div v-if="uploading">正在上传图片...</div>
</div>
</template>
<script>
export default {
data() {
return {
uploading: false
}
},
methods: {
customImageUpload() {
const editor = this.quill
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = 'image/*'
fileInput.onchange = (e) => {
const file = e.target.files[0]
if (file) {
this.uploading = true
this.uploadImage(file).then(url => {
editor.insertEmbed(editor.getSelection().index, 'image', url)
this.uploading = false
}).catch(() => {
this.uploading = false
})
}
}
fileInput.click()
},
uploadImage(file) {
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('file', file)
// 实际开发中应替换为真实接口
fetch('https://example.com/upload', {
method: 'POST',
body: formData
}).then(res => res.json()).then(data => {
resolve(data.url)
}).catch(err => {
reject(err)
})
})
}
}
}
</script>关键点：
- 自定义 toolbar 按钮
- 使用
<input type="file">实现文件选择 - 使用
FormData处理文件上传 - 状态管理（上传中提示）
五、完整案例
1. 项目结构
src/
├── components/
│ └── RichTextEditor.vue
├── assets/
│ └── upload.png
├── utils/
│ └── quillUtils.js
├── api/
│ └── upload.js
└── App.vue2. 完整组件代码
<template>
<div>
<h2>富文本编辑器示例</h2>
<quill-editor
v-model="content"
:options="editorOptions"
@blur="onBlur"
@focus="onFocus"
>
<div slot="toolbar">
<button @click="customImageUpload">自定义图片上传</button>
</div>
</quill-editor>
<div v-if="uploading">正在上传图片...</div>
<div v-if="content" class="preview">
<h3>预览内容</h3>
<div v-html="content" class="content-preview"></div>
</div>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { uploadImage } from '@/api/upload'
export default {
components: { quillEditor },
data() {
return {
content: '',
editorOptions: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
[{'header': [1, 2, 3, 4, 5, 6, false]]},
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}],
['clean'],
['link', 'image', 'video']
]
}
},
uploading: false
}
},
mounted() {
this.initCustomImageUpload()
},
methods: {
initCustomImageUpload() {
const editor = this.quill
const toolbar = editor.getModule('toolbar')
toolbar.addHandler('image', this.handleImage)
},
handleImage(file) {
const reader = new FileReader()
reader.onload = (e) => {
this.uploading = true
uploadImage(e.target.result).then(url => {
editor.insertEmbed(editor.getSelection().index, 'image', url)
this.uploading = false
}).catch(() => {
this.uploading = false
})
}
reader.readAsDataURL(file)
},
customImageUpload() {
const editor = this.quill
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = 'image/*'
fileInput.onchange = (e) => {
const file = e.target.files[0]
if (file) {
this.uploading = true
uploadImage(file).then(url => {
editor.insertEmbed(editor.getSelection().index, 'image', url)
this.uploading = false
}).catch(() => {
this.uploading = false
})
}
}
fileInput.click()
},
onBlur() {
console.log('失去焦点', this.content)
},
onFocus() {
console.log('获得焦点', this.content)
}
}
}
</script>
<style scoped>
.content-preview {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
</style>3. 接口实现
// src/api/upload.js
export async function uploadImage(file) {
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('file', file)
fetch('https://example.com/upload', {
method: 'POST',
body: formData
}).then(res => res.json()).then(data => {
if (data.success) {
resolve(data.url)
} else {
reject(new Error('上传失败'))
}
}).catch(err => {
reject(err)
})
})
}六、源码解析
Quill的模块系统：
const toolbar = editor.getModule('toolbar') toolbar.addHandler('image', this.handleImage)- 获取toolbar模块实例
- 注册自定义的image事件处理函数
图片处理流程：
reader.onload = (e) => { this.uploading = true uploadImage(e.target.result).then(url => { editor.insertEmbed(editor.getSelection().index, 'image', url) this.uploading = false }) }- 读取文件内容
- 调用上传接口
- 插入图片到光标位置
事件处理机制：
onBlur() { console.log('失去焦点', this.content) }- 监听编辑器失去焦点事件
- 可用于保存内容或校验数据
七、进阶使用
1. 图片上传的优化方案
压缩图片：
function compressImage(file, quality = 0.7) { return new Promise((resolve) => { const reader = new FileReader() reader.onload = (e) => { const img = new Image() img.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, img.width, img.height) const dataUrl = canvas.toDataURL('image/jpeg', quality) resolve(dataUrl) } img.src = e.target.result } reader.readAsDataURL(file) }) }上传进度提示：
uploadImage(file) { return new Promise((resolve, reject) => { const formData = new FormData() formData.append('file', file) const xhr = new XMLHttpRequest() xhr.open('POST', 'https://example.com/upload', true) xhr.upload.onprogress = (e) => { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100 console.log(`上传进度: ${percent.toFixed(2)}%`) } } xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.responseText) } else { reject(new Error('上传失败')) } } xhr.send(formData) }) }
2. 内容保存的处理
saveContent() {
// 过滤HTML标签，防止XSS攻击
const sanitizedContent = this.sanitizeHTML(this.content)
// 保存到后端
fetch('/api/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: sanitizedContent })
}).then(res => res.json())
.then(data => {
if (data.success) {
alert('保存成功')
}
})
}
sanitizeHTML(html) {
return DOMPurify.sanitize(html)
}八、性能与工程实践
1. 性能优化策略
懒加载图片：
function lazyLoadImages(html) { const parser = new DOMParser() const doc = parser.parseFromString(html, 'text/html') doc.querySelectorAll('img').forEach(img => { img.src = 'https://example.com/loading.gif' img.onload = () => { img.src = img.dataset.originalSrc } }) return doc.body.innerHTML }限制图片大小：
function validateImageSize(file) { const maxSize = 5 * 1024 * 1024 // 5MB if (file.size > maxSize) { throw new Error('图片大小超过限制') } }
2. 异常处理机制
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
})
if (!response.ok) throw new Error('服务器响应异常')
} catch (err) {
console.error('图片上传失败:', err)
this.uploading = false
this.$message.error('图片上传失败')
}九、常见问题与踩坑
1. 常见错误及解决方法
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 图片无法显示 | 未正确替换占位符 | 在uploadImage返回的URL中需要包含完整的图片路径 |
| 编辑器无法聚焦 | 未正确初始化 | 确保在mounted钩子中初始化编辑器 |
| 跨域问题 | 后端未配置CORS | 使用Nginx配置CORS头或使用代理服务器 |
| 内容无法保存 | 编码问题 | 确保前后端使用相同的编码格式（如UTF-8） |
| 内容格式异常 | 未正确处理HTML | 使用DOMPurify进行HTML净化 |
2. 典型错误示例
// 错误示例：未处理上传异常
uploadImage(file) {
return fetch('/api/upload', {
method: 'POST',
body: formData
}).then(res => res.json())
}问题：未处理网络错误和服务器响应异常
改进：
uploadImage(file) {
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('file', file)
fetch('/api/upload', {
method: 'POST',
body: formData
}).then(res => {
if (!res.ok) throw new Error('服务器响应异常')
return res.json()
}).then(data => {
resolve(data.url)
}).catch(err => {
reject(err)
})
})
}十、最佳实践
安全实践：
- 使用
DOMPurify净化HTML内容 - 验证图片格式和大小
- 使用HTTPS协议进行图片传输
- 使用
性能实践：
- 对图片进行压缩处理
- 使用懒加载技术
- 限制同时上传的图片数量
可维护性实践：
- 将图片上传逻辑抽离为独立模块
- 使用统一的错误处理机制
- 添加详细的日志记录
可扩展性实践：
- 设计可插拔的模块系统
- 支持多种图片上传方式（本地、远程、云存储）
- 提供配置参数控制行为
十一、总结
本文深入探讨了vue-quill-editor在Vue项目中的应用，重点分析了富文本编辑器的自定义图片上传功能。通过实际案例展示了如何处理编辑器内容、实现图片上传、处理异常情况等关键问题。
在实际开发中，建议根据业务需求选择合适的编辑器方案。对于需要复杂格式支持和图片处理的场景，vue-quill-editor是一个优秀的选择；但对于简单的文本输入需求，可以考虑更轻量的解决方案。
需要注意的是，任何富文本编辑器都存在XSS攻击风险，必须配合严格的输入验证和内容净化机制。同时，应关注性能问题，特别是在处理大量图片和复杂格式时，需要进行适当的优化。
通过本文的实践，开发者可以构建出功能完善、安全可靠的富文本编辑器组件，满足大多数业务场景的需求。