uniapp富文本编辑器实战：从图片上传到内容导出全流程解析
uniapp富文本编辑器实战：从图片上传到内容导出全流程解析
在移动应用和Web开发中，富文本编辑功能几乎是内容管理系统的标配需求。无论是博客发布、商品详情编辑还是社区发帖，一个功能完善、体验流畅的富文本编辑器都能极大提升用户的内容创作效率。uniapp作为跨端开发的利器，其内置的editor组件为开发者提供了实现富文本编辑功能的便捷途径。本文将深入探讨如何在uniapp项目中构建一个完整的富文本编辑流程，特别聚焦开发者最常遇到的图片上传和内容导出两大核心痛点。
1. 编辑器基础配置与初始化
在开始构建富文本编辑功能前，我们需要对uniapp的editor组件有基本了解。这个组件在不同平台有着不同的实现机制：在小程序端是原生组件，在H5端则基于contenteditable特性实现，而在App端则通过webview桥接技术提供支持。这种跨平台一致性正是uniapp的优势所在。
基本配置示例：
<editor id="myEditor" class="editor-content" placeholder="开始创作..." show-img-size show-img-toolbar show-img-resize @ready="onEditorReady" @focus="onEditorFocus" @statuschange="onStatusChange"> </editor>关键属性说明：
show-img-*系列属性控制图片操作相关的工具栏显示@ready事件在编辑器初始化完成后触发@statuschange可监听样式变化
初始化编辑器实例的正确姿势：
onEditorReady() { this.editorCtx = uni.createSelectorQuery() .in(this) .select('#myEditor') .fields({ context: true }, res => { this.editorContext = res.context }) .exec() }注意：获取editorContext的时机非常重要，必须在组件mounted之后，通常放在@ready事件中处理。
2. 图片上传的完整解决方案
图片处理是富文本编辑中最复杂的环节之一，涉及本地选择、上传服务器、插入编辑器等多个步骤。下面我们实现一个支持多图上传的完整方案。
2.1 图片选择与预处理
首先实现图片选择功能：
async chooseImages() { const res = await uni.chooseImage({ count: 9, // 最多选择9张 sizeType: ['original', 'compressed'], // 支持原图和压缩图 sourceType: ['album', 'camera'] // 相册和相机 }) // 对选择的图片进行尺寸校验 const validImages = res.tempFiles.filter(file => { if (file.size > 5 * 1024 * 1024) { uni.showToast({ title: `${file.name}超过5MB限制`, icon: 'none' }) return false } return true }) this.uploadImages(validImages) }2.2 实现分片上传与进度显示
对于大图片，建议采用分片上传策略：
async uploadImages(files) { const uploadTasks = files.map(file => { return new Promise((resolve, reject) => { const uploadTask = uni.uploadFile({ url: 'https://your-api.com/upload', filePath: file.path, name: 'file', formData: { type: 'editor' }, // 上传进度监控 progress: ({ progress }) => { this.updateProgress(file.name, progress) }, success: (res) => { const data = JSON.parse(res.data) resolve(data.url) }, fail: (err) => { reject(err) } }) // 可保存uploadTask用于取消上传 this.uploadTasks.push(uploadTask) }) }) try { const urls = await Promise.all(uploadTasks) this.insertImagesToEditor(urls) } catch (error) { console.error('上传失败', error) } }2.3 图片插入与样式控制
获取到图片URL后，将其插入编辑器：
insertImagesToEditor(urls) { if (!this.editorContext) return urls.forEach(url => { this.editorContext.insertImage({ src: url, width: '100%', // 自适应宽度 data: { // 可添加自定义数据 uploadTime: Date.now() }, success: () => { console.log('图片插入成功') } }) }) }图片样式覆盖技巧：
/* 全局样式覆盖 */ .editor-content img { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 4px; } /* 处理编辑器内图片工具栏样式 */ .editor-content .ql-image-toolbar { z-index: 9999 !important; }3. 内容导出与格式处理
富文本内容导出是另一个关键环节，需要考虑不同平台的表现一致性以及后续的内容渲染问题。
3.1 获取编辑器内容
基本内容获取方法：
getEditorContent() { return new Promise((resolve) => { this.editorContext.getContents({ success: (res) => { console.log('HTML内容:', res.html) console.log('纯文本内容:', res.text) console.log('Delta格式:', res.delta) resolve(res) }, fail: (err) => { console.error('获取内容失败', err) } }) }) }3.2 HTML内容净化处理
直接从编辑器获取的HTML可能包含平台特定的标签和样式，需要进行净化：
import xss from 'xss' // 使用xss库防止XSS攻击 sanitizeHtml(html) { const options = { whiteList: { a: ['href', 'title', 'target'], img: ['src', 'alt', 'width', 'height'], p: [], h1: [], h2: [], h3: [], h4: [], h5: [], h6: [], strong: [], em: [], u: [], s: [], ol: [], ul: [], li: [], blockquote: [] }, css: false // 禁用所有样式 } return xss(html, options) }3.3 处理平台差异问题
不同平台下导出的HTML可能存在差异，需要进行统一处理：
normalizeHtml(html) { // 处理微信小程序临时图片路径 if (uni.getSystemInfoSync().platform === 'mp-weixin') { html = html.replace(/data-local="([^"]*)"/g, (match, p1) => { return `src="${this.convertTempPathToUrl(p1)}"` }) } // 统一图片样式 html = html.replace(/<img/g, '<img style="max-width:100%;height:auto;margin:10px 0;"') return html }4. 高级功能与性能优化
在基础功能之上，我们可以进一步优化编辑器的使用体验和性能表现。
4.1 实现撤销/重做功能
利用delta对象实现简单的历史记录：
data() { return { history: [], historyIndex: -1, // ... } }, methods: { saveToHistory() { this.editorContext.getContents({ success: (res) => { // 只保留最近50条记录 this.history = this.history.slice(0, this.historyIndex + 1) this.history.push(res.delta) this.historyIndex = this.history.length - 1 } }) }, undo() { if (this.historyIndex <= 0) return this.historyIndex-- this.editorContext.setContents({ delta: this.history[this.historyIndex] }) }, redo() { if (this.historyIndex >= this.history.length - 1) return this.historyIndex++ this.editorContext.setContents({ delta: this.history[this.historyIndex] }) } }4.2 大文档性能优化策略
当处理长篇内容时，可采取以下优化措施：
懒加载图片：
<img :src="placeholderImage" :data-src="realImageUrl" class="lazy-image" @load="handleImageLoad">分块保存机制：
// 将大文档分成多个部分保存 async saveLargeContent() { const content = await this.getEditorContent() const chunks = this.splitContent(content.html) for (let i = 0; i < chunks.length; i++) { await api.saveContentChunk({ chunkId: i, content: chunks[i] }) } await api.commitContent({ totalChunks: chunks.length }) }4.3 自定义扩展功能
通过editorContext.format方法可以扩展更多编辑功能：
添加自定义样式：
setCustomStyle() { this.editorContext.format('backgroundColor', '#f5f5f5') this.editorContext.format('fontFamily', 'Arial') }插入自定义组件标记：
insertCustomComponent() { const componentId = `custom-${Date.now()}` this.editorContext.insertText({ text: `[${componentId}]`, success: () => { // 保存组件数据 this.customComponents[componentId] = { type: 'video', src: 'https://example.com/video.mp4' } } }) }在实际项目中，我们还需要考虑编辑器的自动保存、多设备同步、版本对比等进阶需求。这些功能的实现思路虽然各不相同，但核心都是围绕editorContext提供的API展开。经过多次实践发现，良好的错误处理和用户提示同样重要 - 当图片上传失败时提供重试选项，在网络不稳定时自动保存草稿，这些细节往往决定了编辑功能的最终用户体验。