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

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

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

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

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

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

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

UniApp官方提供的rich-text组件只具备富文本展示本事，不支持编辑。以是最终决定基于原生本事本身封装一个轻量级的富文本编辑器组件。
焦点技术点

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

开发实现

1. 创建根本组件结构

首先，我们必要创建一个根本的编辑器组件结构：

1. <template>
2.   <view class="rich-editor">
3.     <view class="toolbar">
4.       <view
5.         v-for="(item, index) in tools"
6.         :key="index"
7.         class="tool-item"
8.         :class="{active: activeFormats[item.format]}"
9.         @tap="handleFormat(item.format, item.value)"
10.       >
11.         <text class="iconfont" :class="item.icon"></text>
12.       </view>
13.     </view>
14.    
15.     <!-- 编辑区域 -->
16.     <view
17.       class="editor-container"
18.       :style="{ height: editorHeight + 'px' }"
19.     >
20.       <view
21.         class="editor-body"
22.         contenteditable="true"
23.         @input="onInput"
24.         @blur="onBlur"
25.         @focus="onFocus"
26.         id="editor"
27.         ref="editor"
28.       ></view>
29.     </view>
30.    
31.     <!-- 底部工具栏 -->
32.     <view class="bottom-tools">
33.       <view class="tool-item" @tap="insertImage">
34.         <text class="iconfont icon-image"></text>
35.       </view>
36.       <view class="tool-item" @tap="insertLink">
37.         <text class="iconfont icon-link"></text>
38.       </view>
39.     </view>
40.   </view>
41. </template>
43. <script>
44. export default {
45.   name: 'RichEditor',
46.   props: {
47.     value: {
48.       type: String,
49.       default: ''
50.     },
51.     height: {
52.       type: Number,
53.       default: 300
54.     },
55.     placeholder: {
56.       type: String,
57.       default: '请输入内容...'
58.     }
59.   },
60.   data() {
61.     return {
62.       editorHeight: 300,
63.       editorContent: '',
64.       selectionRange: null,
65.       activeFormats: {
66.         bold: false,
67.         italic: false,
68.         underline: false,
69.         strikethrough: false,
70.         alignLeft: true,
71.         alignCenter: false,
72.         alignRight: false
73.       },
74.       tools: [
75.         { format: 'bold', icon: 'icon-bold', value: 'bold' },
76.         { format: 'italic', icon: 'icon-italic', value: 'italic' },
77.         { format: 'underline', icon: 'icon-underline', value: 'underline' },
78.         { format: 'strikethrough', icon: 'icon-strikethrough', value: 'line-through' },
79.         { format: 'alignLeft', icon: 'icon-align-left', value: 'left' },
80.         { format: 'alignCenter', icon: 'icon-align-center', value: 'center' },
81.         { format: 'alignRight', icon: 'icon-align-right', value: 'right' }
82.       ]
83.     }
84.   },
85.   created() {
86.     this.editorHeight = this.height
87.     this.editorContent = this.value
88.   },
89.   mounted() {
90.     this.initEditor()
91.   },
92.   methods: {
93.     initEditor() {
94.       const editor = this.$refs.editor
95.       if (editor) {
96.         editor.innerHTML = this.value || `<p><br></p>`
97.       }
98.       
99.       // 设置placeholder
100.       if (!this.value && this.placeholder) {
101.         this.$nextTick(() => {
102.           editor.setAttribute('data-placeholder', this.placeholder)
103.         })
104.       }
105.     },
106.    
107.     // 监听输入
108.     onInput(e) {
109.       // 获取当前内容
110.       this.editorContent = e.target.innerHTML
111.       this.$emit('input', this.editorContent)
112.       this.saveSelection()
113.     },
114.    
115.     // 保存当前选区
116.     saveSelection() {
117.       const selection = window.getSelection()
118.       if (selection.rangeCount > 0) {
119.         this.selectionRange = selection.getRangeAt(0)
120.       }
121.     },
122.    
123.     // 恢复选区
124.     restoreSelection() {
125.       if (this.selectionRange) {
126.         const selection = window.getSelection()
127.         selection.removeAllRanges()
128.         selection.addRange(this.selectionRange)
129.         return true
130.       }
131.       return false
132.     },
133.    
134.     // 处理格式化
135.     handleFormat(format, value) {
136.       // 恢复选区
137.       if (!this.restoreSelection()) {
138.         console.log('No selection to format')
139.         return
140.       }
141.       
142.       // 根据不同格式执行不同操作
143.       switch(format) {
144.         case 'bold':
145.         case 'italic':
146.         case 'underline':
147.         case 'strikethrough':
148.           document.execCommand(format, false, null)
149.           break
150.         case 'alignLeft':
151.         case 'alignCenter':
152.         case 'alignRight':
153.           document.execCommand('justify' + format.replace('align', ''), false, null)
154.           break
155.         default:
156.           console.log('未知格式:', format)
157.       }
158.       
159.       // 更新激活状态
160.       this.checkActiveFormats()
161.       
162.       // 触发内容变化
163.       this.editorContent = this.$refs.editor.innerHTML
164.       this.$emit('input', this.editorContent)
165.     },
166.    
167.     // 检查当前激活的格式
168.     checkActiveFormats() {
169.       this.activeFormats.bold = document.queryCommandState('bold')
170.       this.activeFormats.italic = document.queryCommandState('italic')
171.       this.activeFormats.underline = document.queryCommandState('underline')
172.       this.activeFormats.strikethrough = document.queryCommandState('strikethrough')
173.       
174.       const alignment = document.queryCommandValue('justifyLeft') ? 'alignLeft' :
175.                        document.queryCommandValue('justifyCenter') ? 'alignCenter' :
176.                        document.queryCommandValue('justifyRight') ? 'alignRight' : 'alignLeft'
177.       
178.       this.activeFormats.alignLeft = alignment === 'alignLeft'
179.       this.activeFormats.alignCenter = alignment === 'alignCenter'
180.       this.activeFormats.alignRight = alignment === 'alignRight'
181.     },
182.    
183.     // 焦点事件
184.     onFocus() {
185.       this.saveSelection()
186.       this.checkActiveFormats()
187.     },
188.    
189.     onBlur() {
190.       this.saveSelection()
191.     },
192.    
193.     // 插入图片
194.     insertImage() {
195.       uni.chooseImage({
196.         count: 1,
197.         success: (res) => {
198.           const tempFilePath = res.tempFilePaths[0]
199.           // 上传图片
200.           this.uploadImage(tempFilePath)
201.         }
202.       })
203.     },
204.    
205.     // 上传图片
206.     uploadImage(filePath) {
207.       // 这里应该是实际的上传逻辑
208.       uni.showLoading({ title: '上传中...' })
209.       
210.       // 模拟上传过程
211.       setTimeout(() => {
212.         // 假设这是上传后的图片URL
213.         const imageUrl = filePath
214.         
215.         // 恢复选区并插入图片
216.         this.restoreSelection()
217.         document.execCommand('insertHTML', false, `<img src="${imageUrl}" style="max-width:100%;" />`)
218.         
219.         // 更新内容
220.         this.editorContent = this.$refs.editor.innerHTML
221.         this.$emit('input', this.editorContent)
222.         
223.         uni.hideLoading()
224.       }, 500)
225.     },
226.    
227.     // 插入链接
228.     insertLink() {
229.       uni.showModal({
230.         title: '插入链接',
231.         editable: true,
232.         placeholderText: 'https://',
233.         success: (res) => {
234.           if (res.confirm && res.content) {
235.             const url = res.content
236.             // 恢复选区
237.             this.restoreSelection()
238.             
239.             // 获取选中的文本
240.             const selection = window.getSelection()
241.             const selectedText = selection.toString()
242.             
243.             // 如果有选中文本，将其设为链接文本；否则使用URL作为文本
244.             const linkText = selectedText || url
245.             
246.             // 插入链接
247.             document.execCommand('insertHTML', false,
248.               `<a href="${url}" target="_blank">${linkText}</a>`)
249.             
250.             // 更新内容
251.             this.editorContent = this.$refs.editor.innerHTML
252.             this.$emit('input', this.editorContent)
253.           }
254.         }
255.       })
256.     },
257.    
258.     // 获取编辑器内容
259.     getContent() {
260.       return this.editorContent
261.     },
262.    
263.     // 设置编辑器内容
264.     setContent(html) {
265.       this.editorContent = html
266.       if (this.$refs.editor) {
267.         this.$refs.editor.innerHTML = html
268.       }
269.       this.$emit('input', html)
270.     }
271.   }
272. }
273. </script>
275. <style>
276. .rich-editor {
277.   width: 100%;
278.   border: 1rpx solid #eee;
279.   border-radius: 10rpx;
280.   overflow: hidden;
281. }
283. .toolbar {
284.   display: flex;
285.   flex-wrap: wrap;
286.   padding: 10rpx;
287.   border-bottom: 1rpx solid #eee;
288.   background-color: #f8f8f8;
289. }
291. .tool-item {
292.   width: 80rpx;
293.   height: 80rpx;
294.   display: flex;
295.   justify-content: center;
296.   align-items: center;
297.   font-size: 40rpx;
298.   color: #333;
299. }
301. .tool-item.active {
302.   color: #007AFF;
303.   background-color: rgba(0, 122, 255, 0.1);
304.   border-radius: 8rpx;
305. }
307. .editor-container {
308.   width: 100%;
309.   overflow-y: auto;
310. }
312. .editor-body {
313.   min-height: 100%;
314.   padding: 20rpx;
315.   font-size: 28rpx;
316.   line-height: 1.5;
317.   outline: none;
318. }
320. .editor-body[data-placeholder]:empty:before {
321.   content: attr(data-placeholder);
322.   color: #999;
323.   font-style: italic;
324. }
326. .bottom-tools {
327.   display: flex;
328.   padding: 10rpx;
329.   border-top: 1rpx solid #eee;
330.   background-color: #f8f8f8;
331. }
333. /* 引入字体图标库 (需要自行配置) */
334. @font-face {
335.   font-family: 'iconfont';
336.   src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
337. }
338. .iconfont {
339.   font-family: "iconfont" !important;
340.   font-style: normal;
341. }
342. </style>

复制代码

2. 处理惩罚平台差别

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

1. // 跨平台选区处理
2. saveSelection() {
3.   // #ifdef H5
4.   const selection = window.getSelection()
5.   if (selection.rangeCount > 0) {
6.     this.selectionRange = selection.getRangeAt(0)
7.   }
8.   // #endif
9.   
10.   // #ifdef MP-WEIXIN
11.   // 微信小程序不支持DOM选区，需使用特殊方法
12.   this.getEditContext().getSelectionRange({
13.     success: (res) => {
14.       this.selectionRange = res
15.     }
16.   })
17.   // #endif
18. },
20. // 获取编辑器上下文（微信小程序）
21. getEditContext() {
22.   // #ifdef MP-WEIXIN
23.   return this.editorCtx || wx.createSelectorQuery()
24.     .in(this)
25.     .select('#editor')
26.     .context(res => {
27.       this.editorCtx = res.context
28.     })
29.     .exec()
30.   // #endif
31.   
32.   return null
33. }

复制代码

3. 加强图片处理惩罚本事

富文本编辑器的一个关键功能是图片处理惩罚，我们必要加强这方面的本事：

1. // 增强版图片上传处理
2. uploadImage(filePath) {
3.   uni.showLoading({ title: '上传中...' })
4.   
5.   // 压缩图片
6.   uni.compressImage({
7.     src: filePath,
8.     quality: 80,
9.     success: res => {
10.       const compressedPath = res.tempFilePath
11.       
12.       // 上传到服务器
13.       uni.uploadFile({
14.         url: 'https://your-upload-endpoint.com/upload',
15.         filePath: compressedPath,
16.         name: 'file',
17.         success: uploadRes => {
18.           try {
19.             const data = JSON.parse(uploadRes.data)
20.             const imageUrl = data.url
21.             
22.             // 插入图片
23.             this.insertImageToEditor(imageUrl)
24.           } catch (e) {
25.             uni.showToast({
26.               title: '上传失败',
27.               icon: 'none'
28.             })
29.           }
30.         },
31.         fail: () => {
32.           uni.showToast({
33.             title: '上传失败',
34.             icon: 'none'
35.           })
36.         },
37.         complete: () => {
38.           uni.hideLoading()
39.         }
40.       })
41.     },
42.     fail: () => {
43.       // 压缩失败，使用原图
44.       this.doUploadFile(filePath)
45.     }
46.   })
47. },
49. // 插入图片到编辑器
50. insertImageToEditor(imageUrl) {
51.   // #ifdef H5
52.   this.restoreSelection()
53.   document.execCommand('insertHTML', false, `<img src="${imageUrl}" style="max-width:100%;" />`)
54.   // #endif
55.   
56.   // #ifdef MP-WEIXIN
57.   this.getEditContext().insertImage({
58.     src: imageUrl,
59.     width: '100%',
60.     success: () => {
61.       console.log('插入图片成功')
62.     }
63.   })
64.   // #endif
65.   
66.   // 更新内容
67.   this.$nextTick(() => {
68.     // #ifdef H5
69.     this.editorContent = this.$refs.editor.innerHTML
70.     // #endif
71.    
72.     // #ifdef MP-WEIXIN
73.     this.getEditContext().getContents({
74.       success: res => {
75.         this.editorContent = res.html
76.       }
77.     })
78.     // #endif
79.    
80.     this.$emit('input', this.editorContent)
81.   })
82. }

复制代码

4. 实现HTML与富文本互转

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

1. // HTML转富文本对象
2. htmlToJson(html) {
3.   const tempDiv = document.createElement('div')
4.   tempDiv.innerHTML = html
5.   
6.   const parseNode = (node) => {
7.     if (node.nodeType === 3) { // 文本节点
8.       return {
9.         type: 'text',
10.         text: node.textContent
11.       }
12.     }
13.    
14.     if (node.nodeType === 1) { // 元素节点
15.       const result = {
16.         type: node.nodeName.toLowerCase(),
17.         children: []
18.       }
19.       
20.       // 处理元素属性
21.       if (node.attributes && node.attributes.length > 0) {
22.         result.attrs = {}
23.         for (let i = 0; i < node.attributes.length; i++) {
24.           const attr = node.attributes[i]
25.           result.attrs[attr.name] = attr.value
26.         }
27.       }
28.       
29.       // 处理样式
30.       if (node.style && node.style.cssText) {
31.         result.styles = {}
32.         const styles = node.style.cssText.split(';')
33.         styles.forEach(style => {
34.           if (style.trim()) {
35.             const [key, value] = style.split(':')
36.             if (key && value) {
37.               result.styles[key.trim()] = value.trim()
38.             }
39.           }
40.         })
41.       }
42.       
43.       // 递归处理子节点
44.       for (let i = 0; i < node.childNodes.length; i++) {
45.         const childResult = parseNode(node.childNodes[i])
46.         if (childResult) {
47.           result.children.push(childResult)
48.         }
49.       }
50.       
51.       return result
52.     }
53.    
54.     return null
55.   }
56.   
57.   const result = []
58.   for (let i = 0; i < tempDiv.childNodes.length; i++) {
59.     const nodeResult = parseNode(tempDiv.childNodes[i])
60.     if (nodeResult) {
61.       result.push(nodeResult)
62.     }
63.   }
64.   
65.   return result
66. },
68. // 富文本对象转HTML
69. jsonToHtml(json) {
70.   if (!json || !Array.isArray(json)) return ''
71.   
72.   const renderNode = (node) => {
73.     if (node.type === 'text') {
74.       return node.text
75.     }
76.    
77.     // 处理元素节点
78.     let html = `<${node.type}`
79.    
80.     // 添加属性
81.     if (node.attrs) {
82.       Object.keys(node.attrs).forEach(key => {
83.         html += ` ${key}="${node.attrs[key]}"`
84.       })
85.     }
86.    
87.     // 添加样式
88.     if (node.styles) {
89.       let styleStr = ''
90.       Object.keys(node.styles).forEach(key => {
91.         styleStr += `${key}: ${node.styles[key]};`
92.       })
93.       if (styleStr) {
94.         html += ` style="${styleStr}"`
95.       }
96.     }
97.    
98.     html += '>'
99.    
100.     // 处理子节点
101.     if (node.children && node.children.length > 0) {
102.       node.children.forEach(child => {
103.         html += renderNode(child)
104.       })
105.     }
106.    
107.     // 关闭标签
108.     html += `</${node.type}>`
109.    
110.     return html
111.   }
112.   
113.   let result = ''
114.   json.forEach(node => {
115.     result += renderNode(node)
116.   })
117.   
118.   return result
119. }

复制代码

实战案例：品评编辑器

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

1. <template>
2.   <view class="comment-editor">
3.     <view class="editor-title">
4.       <text>发表评论</text>
5.     </view>
6.    
7.     <rich-editor
8.       v-model="commentContent"
9.       :height="200"
10.       placeholder="说点什么吧..."
11.       ref="editor"
12.     ></rich-editor>
13.    
14.     <view class="action-bar">
15.       <view class="action-btn cancel" @tap="cancel">取消</view>
16.       <view class="action-btn submit" @tap="submitComment">发布</view>
17.     </view>
18.   </view>
19. </template>
21. <script>
22. import RichEditor from '@/components/rich-editor/rich-editor.vue'
24. export default {
25.   components: {
26.     RichEditor
27.   },
28.   data() {
29.     return {
30.       commentContent: '',
31.       replyTo: null
32.     }
33.   },
34.   props: {
35.     articleId: {
36.       type: [String, Number],
37.       required: true
38.     }
39.   },
40.   methods: {
41.     cancel() {
42.       this.commentContent = ''
43.       this.$refs.editor.setContent('')
44.       this.$emit('cancel')
45.     },
46.    
47.     submitComment() {
48.       if (!this.commentContent.trim()) {
49.         uni.showToast({
50.           title: '评论内容不能为空',
51.           icon: 'none'
52.         })
53.         return
54.       }
55.       
56.       uni.showLoading({ title: '发布中...' })
57.       
58.       // 提交评论
59.       this.$api.comment.add({
60.         article_id: this.articleId,
61.         content: this.commentContent,
62.         reply_to: this.replyTo
63.       }).then(res => {
64.         uni.hideLoading()
65.         
66.         if (res.code === 0) {
67.           uni.showToast({
68.             title: '评论发布成功',
69.             icon: 'success'
70.           })
71.          
72.           // 清空编辑器
73.           this.commentContent = ''
74.           this.$refs.editor.setContent('')
75.          
76.           // 通知父组件刷新评论列表
77.           this.$emit('submit-success', res.data)
78.         } else {
79.           uni.showToast({
80.             title: res.msg || '评论发布失败',
81.             icon: 'none'
82.           })
83.         }
84.       }).catch(() => {
85.         uni.hideLoading()
86.         uni.showToast({
87.           title: '网络错误，请重试',
88.           icon: 'none'
89.         })
90.       })
91.     },
92.    
93.     // 回复某条评论
94.     replyComment(comment) {
95.       this.replyTo = comment.id
96.       this.$refs.editor.setContent(`<p>回复 @${comment.user.nickname}：</p>`)
97.       this.$refs.editor.focus()
98.     }
99.   }
100. }
101. </script>
103. <style>
104. .comment-editor {
105.   padding: 20rpx;
106.   background-color: #fff;
107.   border-radius: 10rpx;
108. }
110. .editor-title {
111.   margin-bottom: 20rpx;
112.   font-size: 32rpx;
113.   font-weight: bold;
114. }
116. .action-bar {
117.   display: flex;
118.   justify-content: flex-end;
119.   margin-top: 20rpx;
120. }
122. .action-btn {
123.   padding: 10rpx 30rpx;
124.   border-radius: 30rpx;
125.   font-size: 28rpx;
126.   margin-left: 20rpx;
127. }
129. .cancel {
130.   color: #666;
131.   background-color: #f3f3f3;
132. }
134. .submit {
135.   color: #fff;
136.   background-color: #007AFF;
137. }
138. </style>

复制代码

踩坑记载

开发过程中碰到了不少坑，这里分享几个关键问题及办理方案：
1. 小步伐富文本本事受限

小步伐不支持通过contenteditable实现的富文本编辑，必要使用平台提供的editor组件。办理方案是使用条件编译，H5使用contenteditable，小步伐使用官方editor组件。

1. <!-- H5编辑器 -->
2. <!-- #ifdef H5 -->
3. <div
4.   class="editor-body"
5.   contenteditable="true"
6.   @input="onInput"
7.   id="editor"
8.   ref="editor"
9. ></div>
10. <!-- #endif -->
12. <!-- 小程序编辑器 -->
13. <!-- #ifdef MP-WEIXIN -->
14. <editor
15.   id="editor"
16.   class="editor-body"
17.   :placeholder="placeholder"
18.   @ready="onEditorReady"
19.   @input="onInput"
20. ></editor>
21. <!-- #endif -->

复制代码

2. 选区处理惩罚差别

差别平台的选区API差别很大，必要分别处理惩罚：

1. // 处理选区问题
2. getSelectionRange() {
3.   return new Promise((resolve) => {
4.     // #ifdef H5
5.     const selection = window.getSelection()
6.     if (selection.rangeCount > 0) {
7.       resolve(selection.getRangeAt(0))
8.     } else {
9.       resolve(null)
10.     }
11.     // #endif
12.    
13.     // #ifdef MP-WEIXIN
14.     this.editorCtx.getSelectionRange({
15.       success: (res) => {
16.         resolve(res)
17.       },
18.       fail: () => {
19.         resolve(null)
20.       }
21.     })
22.     // #endif
23.   })
24. }

复制代码

3. 图片上传巨细限制

多端应用中，图片上传和展示必要考虑差别平台的限制：

1. // 处理图片大小限制
2. async handleImageUpload(file) {
3.   // 检查文件大小
4.   if (file.size > 5 * 1024 * 1024) { // 5MB
5.     uni.showToast({
6.       title: '图片不能超过5MB',
7.       icon: 'none'
8.     })
9.     return null
10.   }
11.   
12.   // 压缩图片
13.   try {
14.     // H5与小程序压缩方式不同
15.     // #ifdef H5
16.     const compressedFile = await this.compressImageH5(file)
17.     return compressedFile
18.     // #endif
19.    
20.     // #ifdef MP
21.     const compressedPath = await this.compressImageMP(file.path)
22.     return { path: compressedPath }
23.     // #endif
24.   } catch (e) {
25.     console.error('图片压缩失败', e)
26.     return file // 失败时使用原图
27.   }
28. }

复制代码

性能优化

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

• 输入防抖 - 镌汰频繁更新导致的性能问题
  
• 延迟加载图片 - 使用懒加载机制
  
• 镌汰DOM操作 - 只管批量更新DOM
  
• 使用假造DOM - 在复杂场景下考虑使用Vue的假造DOM机制
  

1. // 输入防抖处理
2. onInput(e) {
3.   if (this.inputTimer) {
4.     clearTimeout(this.inputTimer)
5.   }
6.   
7.   this.inputTimer = setTimeout(() => {
8.     // #ifdef H5
9.     this.editorContent = this.$refs.editor.innerHTML
10.     // #endif
11.    
12.     // #ifdef MP-WEIXIN
13.     this.editorContent = e.detail.html
14.     // #endif
15.    
16.     this.$emit('input', this.editorContent)
17.   }, 300)
18. }

复制代码

总结

通过这次开发实践，我实现了一个跨平台的富文本编辑器组件，总结几点经验：

• 平台差别是最大挑战，必要利用条件编译提供各平台最佳实现
  
• 功能要适中，不是全部Web富文本功能都得当移动端
  
• 性能优化很重要，尤其是在低端设备上
  
• 良好的用户体验必要细节打磨，如适当的反馈、容错处理惩罚等
  

富文本编辑是一个复杂的课题，即使是成熟的Web编辑器也有各种问题。在移动端和小步伐环境中，受限更多。我们的方案固然不完善，但通过合理的弃取宁静台适配，已经能满意大部门应用场景的需求。
后续还可以继承完善这个组件，比如添加表格支持、代码高亮、Markdown转换等高级功能。希望本文对你有所启发，欢迎在品评区交流讨论！
参考资料

• UniApp官方文档
  
• execCommand API参考
  
• ContentEditable详解
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告