本文同步发表于我的微信公众号,微信搜索 程语新视界 即可关注,每个工作日都有文章更新
一、RichEditor 核心功能
1. 组件定位
- 作用:支持图文混排、交互式编辑的富文本组件,适用于评论、聊天输入等场景 。
- 版本支持:从API 10开始支持,API 12新增增强功能(如预上屏、实体识别) 。
2. 与RichText对比
特性 | RichEditor | RichText |
---|---|---|
编辑能力 | ✅ 支持图文输入和交互 | ❌ 仅展示HTML内容 |
性能 | 较高(原生渲染) | 较低(依赖WebView) |
适用场景 | 评论框、文档编辑器 | 静态HTML展示 |
二、核心API与使用示例
1. 基础初始化
// 方式1:简单初始化
RichEditor({ controller: new RichEditorController() })
.width('100%')
.height(200)
// 方式2:带样式初始化(API 12+)
RichEditor({
options: {
placeholder: '请输入内容',
defaultStyle: { fontColor: Color.Black }
}
})
2. 内容操作API
方法 | 说明 | 示例 |
---|---|---|
addTextSpan | 添加文本 | controller.addTextSpan('Hello', { fontColor: Color.Red }) |
addImageSpan | 添加图片 | controller.addImageSpan($r('app.media.icon'), { width: 100 }) |
getSpans | 获取指定范围内容 | const spans = controller.getSpans({ start: 0, end: 5 }) |
insertText | 在光标处插入文本 | controller.insertText('插入内容') |
3. 交互控制API
// 自定义键盘(避免系统输入法)
RichEditor()
.customKeyboard(() => {
Column() {
Button('A').onClick(() => controller.insertText('A'))
}
}, { avoidKeyboard: true }) // API 12+支持避让功能
// 文本选择菜单
RichEditor()
.bindSelectionMenu(
RichEditorSpanType.TEXT,
() => MenuItem('复制'),
ResponseType.LongPress
)
三、高级功能详解
1. 实体识别(API 11+)
// 自动识别电话/链接等
RichEditor()
.enableDataDetector(true)
.dataDetectorConfig({
types: [DetectType.PHONE, DetectType.URL],
onDetectResultUpdate: (result) => {
console.log(`识别到实体: ${result.type}`)
}
})
效果:自动为电话号码添加蓝色下划线,点击触发拨号菜单。
2. 协同编辑(跨设备)
// 跨设备同步编辑内容
RichEditor()
.onTextChange((text) => {
deviceManager.sendTextToOtherDevices(text)
})
3. 预上屏功能(API 12+)
// 输入法候选词直接预览
RichEditor()
.enablePreviewText(true)
.onIMEInputComplete((result) => {
console.log(`最终输入: ${result.text}`)
})
四、实战:评论编辑器
@Entry
@Component
struct CommentEditor {
controller: RichEditorController = new RichEditorController()
@State charCount: number = 0
build() {
Column() {
// 富文本编辑区
RichEditor(this.controller)
.height(150)
.placeholder('说点什么...')
.onTextChange((text) => {
this.charCount = text.length
})
// 功能按钮
Row() {
Button('插入表情')
.onClick(() => {
this.controller.addImageSpan($r('app.media.emoji'))
})
Text(`字数: ${this.charCount}/500`)
}
}
}
}
五、性能优化与避坑
1. 内存管理
- 大文本处理:分块加载(每页不超过5000字符)
- 图片优化:压缩后再通过
addImageSpan
插入
2. 常见问题
问题 | 解决方案 |
---|---|
键盘遮挡内容 | 使用.customKeyboard() 或设置avoidKeyboard: true |
复制粘贴失效 | 检查.copyOptions(CopyOptions.LocalDevice) 是否启用 |
跨设备样式不一致 | 强制指定字体addTextSpan(..., { fontFamily: 'HarmonyOS Sans' }) |
3. 安全限制
- 禁用危险标签:
<script>
、<iframe>
会被自动过滤 - 敏感权限:剪贴板访问需声明
ohos.permission.PASTE
权限