HarmonyOS6 ArkTS RichEditor组件使用文档

文章目录完整代码核心API1. 控制器 RichEditorController2. 基础属性3. 核心事件4. 自定义能力总结1. 插入富文本内容2. 修改文本样式3. 获取选区信息4. 自定义键盘RichEditor是 HarmonyOS6 提供的富文本编辑组件支持文本样式编辑、图片/Symbol插入、自定义键盘、自定义长按菜单、选区操作、事件监听等完整富文本能力广泛适用于笔记、文章编辑、消息输入、表单富文本等场景。完整代码Entry Component struct RichEditorFullDemo { controller: RichEditorController new RichEditorController(); State selectStart: number -1; State selectEnd: number -1; State selectContent: string ; build() { Column({ space: 10 }) { Text(RichEditor 完整功能演示) .fontSize(22) .fontWeight(FontWeight.Bold) .margin({ top: 15 }); Text(选中范围[${this.selectStart}, ${this.selectEnd}]) .fontSize(14) .width(90%) .textAlign(TextAlign.Start); Text(选中内容${this.selectContent}) .fontSize(14) .width(90%) .textAlign(TextAlign.Start); Row({ space: 8 }) { Button(加粗).width(70).onClick(() { this.controller.updateSpanStyle({ start: this.selectStart, end: this.selectEnd, textStyle: { fontWeight: FontWeight.Bolder } }); }); Button(红色).width(70).onClick(() { this.controller.updateSpanStyle({ start: this.selectStart, end: this.selectEnd, textStyle: { fontColor: #FF0000 } }); }); Button(删除选中).width(90).onClick(() { this.controller.deleteSpans({ start: this.selectStart, end: this.selectEnd }); this.selectStart -1; this.selectEnd -1; this.selectContent ; }); }.width(90%); RichEditor({ controller: this.controller }) .placeholder(请输入富文本内容..., { fontColor: #999, font: { size: 16 } }) .caretColor(#007DFF) .selectedBackgroundColor(#a0c8ff) .copyOptions(CopyOptions.LocalDevice) .enablePreviewText(true) .enterKeyType(EnterKeyType.NEW_LINE) .barState(BarState.Auto) .onReady(() { this.controller.addTextSpan(Hello HarmonyOS , { style: { fontSize: 18, fontColor: #333 } }); this.controller.addSymbolSpan($r(sys.symbol.a_5G), { style: { fontSize: 20 } }); this.controller.addImageSpan($r(sys.media.ohos_app_icon), { imageStyle: { size: [40vp, 40vp], verticalAlign: ImageSpanAlignment.CENTER } }); }) .onSelect((selection: RichEditorSelection) { this.selectStart selection.selection[0]; this.selectEnd selection.selection[1]; this.selectContent ; selection.spans.forEach((item) { const textItem item as RichEditorTextSpanResult; if (textItem.value ! undefined) { this.selectContent textItem.value; } }); }) .aboutToIMEInput((value: RichEditorInsertValue) { return true; }) .onIMEInputComplete((result: RichEditorTextSpanResult) {}) .aboutToDelete((value: RichEditorDeleteValue) { return true; }) .onDeleteComplete(() {}) .onPaste((event?: PasteEvent) {}) .onCopy((event: CopyEvent) {}) .onCut((event: CutEvent) {}) .onEditingChange((isEditing: boolean) {}) .onDidChange(() {}) .onSubmit((enterKey: EnterKeyType) {}) .customKeyboard(this.CustomKeyboardBuilder()) .bindSelectionMenu(RichEditorSpanType.TEXT, this.CustomMenuBuilder(), RichEditorResponseType.LONG_PRESS) .width(90%) .height(300) .border({ width: 1, color: #ddd }) .backgroundColor(#f9f9f9) .padding(10) .margin({ top: 10 }); } .width(100%) .backgroundColor(#fff) .padding({ bottom: 30 }); } Builder CustomKeyboardBuilder() { Column() { Grid() { GridItem() { Button(1).width(80).height(40).onClick(() this.insertText(1)) } GridItem() { Button(2).width(80).height(40).onClick(() this.insertText(2)) } GridItem() { Button(3).width(80).height(40).onClick(() this.insertText(3)) } GridItem() { Button(4).width(80).height(40).onClick(() this.insertText(4)) } GridItem() { Button(5).width(80).height(40).onClick(() this.insertText(5)) } GridItem() { Button(6).width(80).height(40).onClick(() this.insertText(6)) } GridItem() { Button(7).width(80).height(40).onClick(() this.insertText(7)) } GridItem() { Button(8).width(80).height(40).onClick(() this.insertText(8)) } GridItem() { Button(9).width(80).height(40).onClick(() this.insertText(9)) } GridItem() { Button(0).width(80).height(40).onClick(() this.insertText(0)) } GridItem() { Button(删除).width(80).height(40).onClick(() this.doDelete()) } GridItem() { Button(确认).width(80).height(40).onClick(() this.controller.stopEditing()) } } .maxCount(3) .columnsGap(5) .rowsGap(5) } .backgroundColor(#eee) .padding(5) } Builder CustomMenuBuilder() { Row({ space: 10 }) { Button(红色).onClick(() { this.controller.updateSpanStyle({ start: this.selectStart, end: this.selectEnd, textStyle: { fontColor: #f00 } }); }); Button(加粗).onClick(() { this.controller.updateSpanStyle({ start: this.selectStart, end: this.selectEnd, textStyle: { fontWeight: FontWeight.Bold } }); }); Button(复制).onClick(() { this.controller.setSelection(this.selectStart, this.selectEnd); }); } .padding(5) .backgroundColor(#fff) .border({ width: 1, color: #ccc }) .borderRadius(5); } insertText(text: string) { this.controller.addTextSpan(text, { offset: this.controller.getCaretOffset() }); } doDelete() { const offset this.controller.getCaretOffset(); if (offset 0) { this.controller.deleteSpans({ start: offset - 1, end: offset }); } } }运行效果如图核心API1. 控制器 RichEditorControllernew RichEditorController()创建富文本控制器addTextSpan()插入文本addSymbolSpan()插入系统图标addImageSpan()插入图片updateSpanStyle()修改选区文本样式deleteSpans()删除选区内容setSelection()设置选区getCaretOffset()获取光标位置stopEditing()收起键盘/结束编辑2. 基础属性属性作用placeholder占位提示文字及样式caretColor光标颜色selectedBackgroundColor选中文本背景色copyOptions复制权限配置enablePreviewText开启输入预上屏enterKeyType回车键类型换行/搜索/完成barState滚动条显示模式3. 核心事件事件触发时机onReady组件初始化完成onSelect文本选区变化aboutToIMEInput输入前拦截onIMEInputComplete输入完成aboutToDelete删除前拦截onPaste/onCopy/onCut粘贴/复制/剪切onEditingChange编辑状态变化onDidChange内容修改完成4. 自定义能力customKeyboard()自定义输入键盘bindSelectionMenu()绑定长按自定义菜单支持文本选区触发、长按触发总结1. 插入富文本内容文本addTextSpan系统图标addSymbolSpan图片addImageSpan支持尺寸、对齐2. 修改文本样式this.controller.updateSpanStyle({start:起始位置,end:结束位置,textStyle:{fontWeight:FontWeight.Bold,fontColor:#FF0000}})3. 获取选区信息selection.selection[0]选区开始selection.selection[1]选区结束遍历spans获取文本内容4. 自定义键盘使用Builder构建自定义数字键盘支持插入、删除、确认功能。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力