鸿蒙OSUniApp开发富文本编辑器组件#三方框架 #Uniapp

使用UniApp开发富文本编辑器组件

富文本编辑在各类应用中非常常见，无论是内容创作平台还是社交软件，都需要提供良好的富文本编辑体验。本文记录了我使用UniApp开发一个跨平台富文本编辑器组件的过程，希望对有类似需求的开发者有所启发。

背景

前段时间接到一个需求，要求在我们的跨平台应用中加入富文本编辑功能，支持基础的文本格式化、插入图片、链接等功能。考虑到项目使用UniApp开发，需要兼容多个平台，市面上现成的富文本编辑器要么不支持跨平台，要么功能过于复杂。于是我决定自己动手，开发一个功能适中、性能良好的富文本编辑器组件。

技术选型

为何不直接使用现有组件？

首先，我调研了几个流行的富文本编辑器：

quill.js - 功能强大，但在小程序环境中存在兼容性问题
wangeditor - 针对Web端优化，小程序支持不佳
mp-html - 专注于小程序，但编辑功能有限

UniApp官方提供的rich-text组件只具备富文本展示能力，不支持编辑。所以最终决定基于原生能力自己封装一个轻量级的富文本编辑器组件。

核心技术点

使用uni.createSelectorQuery获取DOM节点
基于contenteditable特性实现编辑功能
自定义文本选区和格式化操作
跨平台样式处理
图片上传和展示

开发实现

1. 创建基础组件结构

首先，我们需要创建一个基础的编辑器组件结构：

<template><view class="rich-editor"><view class="toolbar"><view v-for="(item, index) in tools" :key="index"class="tool-item":class="{active: activeFormats[item.format]}"@tap="handleFormat(item.format, item.value)"><text class="iconfont" :class="item.icon"></text></view></view><!-- 编辑区域 --><view class="editor-container":style="{ height: editorHeight + 'px' }"><viewclass="editor-body"contenteditable="true"@input="onInput"@blur="onBlur"@focus="onFocus"id="editor"ref="editor"></view></view><!-- 底部工具栏 --><view class="bottom-tools"><view class="tool-item" @tap="insertImage"><text class="iconfont icon-image"></text></view><view class="tool-item" @tap="insertLink"><text class="iconfont icon-link"></text></view></view></view>
</template><script>
export default {name: 'RichEditor',props: {value: {type: String,default: ''},height: {type: Number,default: 300},placeholder: {type: String,default: '请输入内容...'}},data() {return {editorHeight: 300,editorContent: '',selectionRange: null,activeFormats: {bold: false,italic: false,underline: false,strikethrough: false,alignLeft: true,alignCenter: false,alignRight: false},tools: [{ format: 'bold', icon: 'icon-bold', value: 'bold' },{ format: 'italic', icon: 'icon-italic', value: 'italic' },{ format: 'underline', icon: 'icon-underline', value: 'underline' },{ format: 'strikethrough', icon: 'icon-strikethrough', value: 'line-through' },{ format: 'alignLeft', icon: 'icon-align-left', value: 'left' },{ format: 'alignCenter', icon: 'icon-align-center', value: 'center' },{ format: 'alignRight', icon: 'icon-align-right', value: 'right' }]}},created() {this.editorHeight = this.heightthis.editorContent = this.value},mounted() {this.initEditor()},methods: {initEditor() {const editor = this.$refs.editorif (editor) {editor.innerHTML = this.value || `<p><br></p>`}// 设置placeholderif (!this.value && this.placeholder) {this.$nextTick(() => {editor.setAttribute('data-placeholder', this.placeholder)})}},// 监听输入onInput(e) {// 获取当前内容this.editorContent = e.target.innerHTMLthis.$emit('input', this.editorContent)this.saveSelection()},// 保存当前选区saveSelection() {const selection = window.getSelection()if (selection.rangeCount > 0) {this.selectionRange = selection.getRangeAt(0)}},// 恢复选区restoreSelection() {if (this.selectionRange) {const selection = window.getSelection()selection.removeAllRanges()selection.addRange(this.selectionRange)return true}return false},// 处理格式化handleFormat(format, value) {// 恢复选区if (!this.restoreSelection()) {console.log('No selection to format')return}// 根据不同格式执行不同操作switch(format) {case 'bold':case 'italic':case 'underline':case 'strikethrough':document.execCommand(format, false, null)breakcase 'alignLeft':case 'alignCenter':case 'alignRight':document.execCommand('justify' + format.replace('align', ''), false, null)breakdefault:console.log('未知格式:', format)}// 更新激活状态this.checkActiveFormats()// 触发内容变化this.editorContent = this.$refs.editor.innerHTMLthis.$emit('input', this.editorContent)},// 检查当前激活的格式checkActiveFormats() {this.activeFormats.bold = document.queryCommandState('bold')this.activeFormats.italic = document.queryCommandState('italic')this.activeFormats.underline = document.queryCommandState('underline')this.activeFormats.strikethrough = document.queryCommandState('strikethrough')const alignment = document.queryCommandValue('justifyLeft') ? 'alignLeft' :document.queryCommandValue('justifyCenter') ? 'alignCenter' :document.queryCommandValue('justifyRight') ? 'alignRight' : 'alignLeft'this.activeFormats.alignLeft = alignment === 'alignLeft'this.activeFormats.alignCenter = alignment === 'alignCenter'this.activeFormats.alignRight = alignment === 'alignRight'},// 焦点事件onFocus() {this.saveSelection()this.checkActiveFormats()},onBlur() {this.saveSelection()},// 插入图片insertImage() {uni.chooseImage({count: 1,success: (res) => {const tempFilePath = res.tempFilePaths[0]// 上传图片this.uploadImage(tempFilePath)}})},// 上传图片uploadImage(filePath) {// 这里应该是实际的上传逻辑uni.showLoading({ title: '上传中...' })// 模拟上传过程setTimeout(() => {// 假设这是上传后的图片URLconst imageUrl = filePath// 恢复选区并插入图片this.restoreSelection()document.execCommand('insertHTML', false, `<img src="${imageUrl}" style="max-width:100%;" />`)// 更新内容this.editorContent = this.$refs.editor.innerHTMLthis.$emit('input', this.editorContent)uni.hideLoading()}, 500)},// 插入链接insertLink() {uni.showModal({title: '插入链接',editable: true,placeholderText: 'https://',success: (res) => {if (res.confirm && res.content) {const url = res.content// 恢复选区this.restoreSelection()// 获取选中的文本const selection = window.getSelection()const selectedText = selection.toString()// 如果有选中文本，将其设为链接文本；否则使用URL作为文本const linkText = selectedText || url// 插入链接document.execCommand('insertHTML', false, `<a href="${url}" target="_blank">${linkText}</a>`)// 更新内容this.editorContent = this.$refs.editor.innerHTMLthis.$emit('input', this.editorContent)}}})},// 获取编辑器内容getContent() {return this.editorContent},// 设置编辑器内容setContent(html) {this.editorContent = htmlif (this.$refs.editor) {this.$refs.editor.innerHTML = html}this.$emit('input', html)}}
}
</script><style>
.rich-editor {width: 100%;border: 1rpx solid #eee;border-radius: 10rpx;overflow: hidden;
}.toolbar {display: flex;flex-wrap: wrap;padding: 10rpx;border-bottom: 1rpx solid #eee;background-color: #f8f8f8;
}.tool-item {width: 80rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;font-size: 40rpx;color: #333;
}.tool-item.active {color: #007AFF;background-color: rgba(0, 122, 255, 0.1);border-radius: 8rpx;
}.editor-container {width: 100%;overflow-y: auto;
}.editor-body {min-height: 100%;padding: 20rpx;font-size: 28rpx;line-height: 1.5;outline: none;
}.editor-body[data-placeholder]:empty:before {content: attr(data-placeholder);color: #999;font-style: italic;
}.bottom-tools {display: flex;padding: 10rpx;border-top: 1rpx solid #eee;background-color: #f8f8f8;
}/* 引入字体图标库 (需要自行配置) */
@font-face {font-family: 'iconfont';src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
}
.iconfont {font-family: "iconfont" !important;font-style: normal;
}
</style>

2. 处理平台差异

UniApp支持多个平台，但在富文本编辑方面存在平台差异，特别是小程序限制较多。下面是一些关键的跨平台适配处理：

// 跨平台选区处理
saveSelection() {// #ifdef H5const selection = window.getSelection()if (selection.rangeCount > 0) {this.selectionRange = selection.getRangeAt(0)}// #endif// #ifdef MP-WEIXIN// 微信小程序不支持DOM选区，需使用特殊方法this.getEditContext().getSelectionRange({success: (res) => {this.selectionRange = res}})// #endif
},// 获取编辑器上下文（微信小程序）
getEditContext() {// #ifdef MP-WEIXINreturn this.editorCtx || wx.createSelectorQuery().in(this).select('#editor').context(res => {this.editorCtx = res.context}).exec()// #endifreturn null
}

3. 增强图片处理能力

富文本编辑器的一个关键功能是图片处理，我们需要增强这方面的能力：

// 增强版图片上传处理
uploadImage(filePath) {uni.showLoading({ title: '上传中...' })// 压缩图片uni.compressImage({src: filePath,quality: 80,success: res => {const compressedPath = res.tempFilePath// 上传到服务器uni.uploadFile({url: 'https://your-upload-endpoint.com/upload',filePath: compressedPath,name: 'file',success: uploadRes => {try {const data = JSON.parse(uploadRes.data)const imageUrl = data.url// 插入图片this.insertImageToEditor(imageUrl)} catch (e) {uni.showToast({title: '上传失败',icon: 'none'})}},fail: () => {uni.showToast({title: '上传失败',icon: 'none'})},complete: () => {uni.hideLoading()}})},fail: () => {// 压缩失败，使用原图this.doUploadFile(filePath)}})
},// 插入图片到编辑器
insertImageToEditor(imageUrl) {// #ifdef H5this.restoreSelection()document.execCommand('insertHTML', false, `<img src="${imageUrl}" style="max-width:100%;" />`)// #endif// #ifdef MP-WEIXINthis.getEditContext().insertImage({src: imageUrl,width: '100%',success: () => {console.log('插入图片成功')}})// #endif// 更新内容this.$nextTick(() => {// #ifdef H5this.editorContent = this.$refs.editor.innerHTML// #endif// #ifdef MP-WEIXINthis.getEditContext().getContents({success: res => {this.editorContent = res.html}})// #endifthis.$emit('input', this.editorContent)})
}

4. 实现HTML与富文本互转

编辑器需要支持HTML格式的导入导出，以便存储和展示：

// HTML转富文本对象
htmlToJson(html) {const tempDiv = document.createElement('div')tempDiv.innerHTML = htmlconst parseNode = (node) => {if (node.nodeType === 3) { // 文本节点return {type: 'text',text: node.textContent}}if (node.nodeType === 1) { // 元素节点const result = {type: node.nodeName.toLowerCase(),children: []}// 处理元素属性if (node.attributes && node.attributes.length > 0) {result.attrs = {}for (let i = 0; i < node.attributes.length; i++) {const attr = node.attributes[i]result.attrs[attr.name] = attr.value}}// 处理样式if (node.style && node.style.cssText) {result.styles = {}const styles = node.style.cssText.split(';')styles.forEach(style => {if (style.trim()) {const [key, value] = style.split(':')if (key && value) {result.styles[key.trim()] = value.trim()}}})}// 递归处理子节点for (let i = 0; i < node.childNodes.length; i++) {const childResult = parseNode(node.childNodes[i])if (childResult) {result.children.push(childResult)}}return result}return null}const result = []for (let i = 0; i < tempDiv.childNodes.length; i++) {const nodeResult = parseNode(tempDiv.childNodes[i])if (nodeResult) {result.push(nodeResult)}}return result
},// 富文本对象转HTML
jsonToHtml(json) {if (!json || !Array.isArray(json)) return ''const renderNode = (node) => {if (node.type === 'text') {return node.text}// 处理元素节点let html = `<${node.type}`// 添加属性if (node.attrs) {Object.keys(node.attrs).forEach(key => {html += ` ${key}="${node.attrs[key]}"`})}// 添加样式if (node.styles) {let styleStr = ''Object.keys(node.styles).forEach(key => {styleStr += `${key}: ${node.styles[key]};`})if (styleStr) {html += ` style="${styleStr}"`}}html += '>'// 处理子节点if (node.children && node.children.length > 0) {node.children.forEach(child => {html += renderNode(child)})}// 关闭标签html += `</${node.type}>`return html}let result = ''json.forEach(node => {result += renderNode(node)})return result
}

实战案例：评论编辑器

下面是一个简化版的评论编辑器实现，可以在社区或博客应用中使用：

<template><view class="comment-editor"><view class="editor-title"><text>发表评论</text></view><rich-editorv-model="commentContent":height="200"placeholder="说点什么吧..."ref="editor"></rich-editor><view class="action-bar"><view class="action-btn cancel" @tap="cancel">取消</view><view class="action-btn submit" @tap="submitComment">发布</view></view></view>
</template><script>
import RichEditor from '@/components/rich-editor/rich-editor.vue'export default {components: {RichEditor},data() {return {commentContent: '',replyTo: null}},props: {articleId: {type: [String, Number],required: true}},methods: {cancel() {this.commentContent = ''this.$refs.editor.setContent('')this.$emit('cancel')},submitComment() {if (!this.commentContent.trim()) {uni.showToast({title: '评论内容不能为空',icon: 'none'})return}uni.showLoading({ title: '发布中...' })// 提交评论this.$api.comment.add({article_id: this.articleId,content: this.commentContent,reply_to: this.replyTo}).then(res => {uni.hideLoading()if (res.code === 0) {uni.showToast({title: '评论发布成功',icon: 'success'})// 清空编辑器this.commentContent = ''this.$refs.editor.setContent('')// 通知父组件刷新评论列表this.$emit('submit-success', res.data)} else {uni.showToast({title: res.msg || '评论发布失败',icon: 'none'})}}).catch(() => {uni.hideLoading()uni.showToast({title: '网络错误，请重试',icon: 'none'})})},// 回复某条评论replyComment(comment) {this.replyTo = comment.idthis.$refs.editor.setContent(`<p>回复 @${comment.user.nickname}：</p>`)this.$refs.editor.focus()}}
}
</script><style>
.comment-editor {padding: 20rpx;background-color: #fff;border-radius: 10rpx;
}.editor-title {margin-bottom: 20rpx;font-size: 32rpx;font-weight: bold;
}.action-bar {display: flex;justify-content: flex-end;margin-top: 20rpx;
}.action-btn {padding: 10rpx 30rpx;border-radius: 30rpx;font-size: 28rpx;margin-left: 20rpx;
}.cancel {color: #666;background-color: #f3f3f3;
}.submit {color: #fff;background-color: #007AFF;
}
</style>

踩坑记录

开发过程中遇到了不少坑，这里分享几个关键问题及解决方案：

1. 小程序富文本能力受限

小程序不支持通过contenteditable实现的富文本编辑，需要使用平台提供的editor组件。解决方案是使用条件编译，H5使用contenteditable，小程序使用官方editor组件。

<!-- H5编辑器 -->
<!-- #ifdef H5 -->
<div class="editor-body"contenteditable="true"@input="onInput"id="editor"ref="editor"
></div>
<!-- #endif --><!-- 小程序编辑器 -->
<!-- #ifdef MP-WEIXIN -->
<editor id="editor" class="editor-body" :placeholder="placeholder"@ready="onEditorReady"@input="onInput"
></editor>
<!-- #endif -->

2. 选区处理差异

不同平台的选区API差异很大，需要分别处理：

// 处理选区问题
getSelectionRange() {return new Promise((resolve) => {// #ifdef H5const selection = window.getSelection()if (selection.rangeCount > 0) {resolve(selection.getRangeAt(0))} else {resolve(null)}// #endif// #ifdef MP-WEIXINthis.editorCtx.getSelectionRange({success: (res) => {resolve(res)},fail: () => {resolve(null)}})// #endif})
}

3. 图片上传大小限制

多端应用中，图片上传和展示需要考虑不同平台的限制：

// 处理图片大小限制
async handleImageUpload(file) {// 检查文件大小if (file.size > 5 * 1024 * 1024) { // 5MBuni.showToast({title: '图片不能超过5MB',icon: 'none'})return null}// 压缩图片try {// H5与小程序压缩方式不同// #ifdef H5const compressedFile = await this.compressImageH5(file)return compressedFile// #endif// #ifdef MPconst compressedPath = await this.compressImageMP(file.path)return { path: compressedPath }// #endif} catch (e) {console.error('图片压缩失败', e)return file // 失败时使用原图}
}

性能优化

为了让编辑器运行更流畅，我做了以下优化：

输入防抖 - 减少频繁更新导致的性能问题
延迟加载图片 - 使用懒加载机制
减少DOM操作 - 尽量批量更新DOM
使用虚拟DOM - 在复杂场景下考虑使用Vue的虚拟DOM机制

// 输入防抖处理
onInput(e) {if (this.inputTimer) {clearTimeout(this.inputTimer)}this.inputTimer = setTimeout(() => {// #ifdef H5this.editorContent = this.$refs.editor.innerHTML// #endif// #ifdef MP-WEIXINthis.editorContent = e.detail.html// #endifthis.$emit('input', this.editorContent)}, 300)
}