鸿蒙5.0实战案例：基于RichEditor的批评编辑

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙（HarmonyOS）北向开辟知识点记载~

✏️ 鸿蒙（OpenHarmony）南向开辟保姆级知识点汇总~

✏️ 鸿蒙应用开辟与鸿蒙体系开辟哪个更有前景？

✏️ 嵌入式开辟适不得当做鸿蒙南向开辟？看完这篇你就相识了~

✏️ 对于大前端开辟来说，转鸿蒙开辟究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记载一场鸿蒙开辟岗位口试经历~

✏️ 持续更新中……

---

场景描述

RichEditor是支持图文混排和文本交互式编辑的组件，在我们利用的APP中是很常见的，好比批评区编辑内容发布、对话框或者谈天室。下面列举一些遇到的场景需求：

• 场景一：基于文字图片以及@信息的好友批评
  
• 场景二：右下角的剩余字数
  
• 场景三：批评中携带所@的用户的附属信息
  
• 场景四：文本选择区域发生变化或编辑状态下光标位置发生变化回调
  
• 场景五：自由切换体系键盘和自定义键盘。
  

方案描述

场景一：基于文字图片以及@信息的好友批评

效果图

方案
1、通过addTextSpan来添加文字，2、通过addImageSpan来添加图片3、通过addBuilderSpan来实现一段内容光标不可插入的效果4、addTextSpan等支持gesture等手势操纵，好比onClick点击和onLongPress长按事件
核心代码
1、由于RichEditor是支持图文混排的，以是RichEditor里面的内容也就是由Text和Image构成的，分别通过addTextSpan和addImageSpan添加，而且还可以设置字体和图片样式，如下代码1：

1. @Entry
3. @Component
5. struct getSpans {
7. editorController = new RichEditorController()
9. build() {
11. Column() {
13. RichEditor({ controller: this.editorController })
15. .width('100%')
17. .backgroundColor(Color.Yellow)
19. .onReady(() => {
21. this.editorController.addImageSpan($r("app.media.icon"),
23. {
25. imageStyle:
27. {
29. size: ["100px", "100px"]
31. }
33. })
35. this.editorController.addTextSpan('男生女生向前冲',
37. {
39. style:
41. {
43. fontColor: Color.Blue,
45. fontSize: 30
47. }
49. })
51. })
53. Button('getSpans-图片').onClick((event: ClickEvent) => {
55. let getSpans = this.editorController.getSpans({ start: 0 })
57. console.log('getSpans0' + JSON.stringify(getSpans[0]))
59. // 必须进行强转才能获取文字信息或者图片信息
61. let span0 = getSpans[0] as RichEditorTextSpanResult
63. console.log('图片相关的信息: ' + JSON.stringify(span0))
65. })
67. Button('getSpans-文字').onClick((event: ClickEvent) => {
69. let getSpans = this.editorController.getSpans({ start: 0 })
71. console.log('getSpans1' + JSON.stringify(getSpans[1]))
73. let span1 = getSpans[1] as RichEditorImageSpanResult
75. console.log('文字相关的信息: ' + JSON.stringify(span1))
77. })
79. }
81. }
83. }

复制代码

2、在常见的批评区艾特好友时，会将“@华为官方客服”视作一个整体，光标无法插入其中，且第一次按删除键时整领会高亮选中，第二次再按删除键才会删除。**必要注意的是，如果利用的全局@Builder，则必要配合bind(this)利用。**后续也可以通过事件制止“即RichEditor控件ClickEvent/TouchEvent支持preventDefault”。

1. @Entry
3. @Component
5. struct BuilderSpan {
7. editorController = new RichEditorController()
9. @Builder
11. At(str: string) {
13. Stack() {
15. Text('@' + str).fontColor(Color.Blue)
17. }
19. }
21. build() {
23. Column() {
25. RichEditor({ controller: this.editorController })
27. .width('100%')
29. .height(50)
31. .backgroundColor(Color.Yellow)
33. .onReady(() => {
35. this.editorController.addBuilderSpan(() => {
37. this.At('华为官方客服')
39. })
41. this.editorController.addTextSpan('！！！')
43. })
45. }
47. }
49. }

复制代码

3、发微博的时候可以输入心情、超链接、文字等一起的内容
代码3：

1. @Component
3. struct Index {
5. @State message: string = '#超话社区#';
7. controller: RichEditorController = new RichEditorController();
9. @State show: boolean = false;
11. build() {
13. Column() {
15. RichEditor({controller: this.controller})
17. .height(56)
19. .width("90%")
21. .borderStyle(BorderStyle.Solid)
23. .borderColor(Color.Black)
25. .borderWidth(1)
27. .onReady(() => {
29. })
31. Button('输入表情').onClick((event: ClickEvent) => {
33. this.controller.addImageSpan($r('app.media.app_icon'), {
35. imageStyle: {
37. size: ["80px", "80px"]
39. }
41. })
43. })
45. Button('超链接').onClick((event: ClickEvent) => {
47. this.controller.addTextSpan(this.message, {
49. offset: this.controller.getCaretOffset(),
51. style:
53. {
55. fontColor: Color.Orange,
57. fontSize: 16
59. },
61. gesture:
63. {
65. onClick: () => {
67. console.log('要跳转链接了哦')
69. },
71. onLongPress: () => {
73. console.log('我被长按了')
75. }
77. }
79. })
81. this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
83. })
85. }
87. .width('100%')
89. }
91. }

复制代码

场景二：右下角的剩余字数

效果图

方案
利用overlay浮层，显示“0/20”字数提示符在组件的右下角。再通过aboutToIMEInput回调（输入法输入内容前），获取插入的文本偏移位置，对输入内容举行限制。
核心代码

1. import promptAction from '@ohos.promptAction';
3. @Entry
5. @Component
7. struct MaxDemo {
9. @State message: string = '蜡笔小新';
11. controller: RichEditorController = new RichEditorController();
13. @State getContentLength: number = 0;
15. @State BOnSt:promptAction.ShowToastOptions = {'message': '已超出内容最大限制.'}
17. build() {
19. Column() {
21. RichEditor({ controller: this.controller })
23. .height(100)
25. .borderWidth(1)
27. .borderColor(Color.Red)
29. .width("100%")
31. .overlay(this.getContentLength + "/20", {
33. align: Alignment.BottomEnd
35. })
37. .aboutToIMEInput((value: RichEditorInsertValue) => {
39. console.log("insertOffset:" + JSON.stringify(value.insertValue)) // 插入的文本偏移位置。
41. if (this.getContentLength < 20) {
43. this.getContentLength = this.getContentLength + value.insertValue.length
45. console.log('实时的内容长度：' + this.getContentLength)
47. return true
49. }
51. promptAction.showToast(this.BOnSt)
53. return false
55. })
57. .aboutToDelete((value: RichEditorDeleteValue) => {
59. console.log('删除：' + JSON.stringify(value))
61. this.getContentLength = this.getContentLength - value.length
63. return true
65. })
67. }
69. .width('100%')
71. }
73. }

复制代码

场景三：批评中携带所@的用户的附属信息

效果图

方案
利用HashMap的set向HashMap中添加或更新一组数据，利用get方法获取指定key所对应的value。
核心代码

1. @Entry
3. @Component
5. struct SameNameDemo {
7. controller: RichEditorController = new RichEditorController();
9. @Builder
11. At(str: string) {
13. Stack() {
15. Text('@' + str).fontColor(Color.Blue)
17. }
19. .onClick(() => {
21. // 添加不同的身份信息
23. const hashMap: HashMap<string, number> = new HashMap();
25. hashMap.set("friend1", 123);
27. let result = hashMap.get("friend1");
29. console.log('result: ' + result)
31. })
33. }
35. build() {
37. Column() {
39. RichEditor({ controller: this.controller })
41. .height(100)
43. .borderWidth(1)
45. .borderColor(Color.Red)
47. .width("100%")
49. Button('好友1').onClick((event: ClickEvent) => {
51. this.controller.addBuilderSpan(() => {
53. this.At('华为官方客服')
55. })
57. })
59. Button('好友2').onClick((event: ClickEvent) => {
61. this.controller.addBuilderSpan(() => {
63. this.At('华为官方客服')
65. })
67. })
69. }
71. .width('100%')
73. }
75. }

复制代码

场景四：文本选择区域发生变化或编辑状态下光标位置发生变化回调

效果图

方案
利用RichEditor组件在API 12支持的新接口 onSelectionChange，在文本选择区域发生变化或编辑状态下光标位置发生变化时触发该回调。光标位置发生变化回调时，选择区域的起始位置等于终止位置(即start = end)。
核心代码

1. @Entry
3. @Component
5. struct Index {
7. @State message: string = '蜡笔小新';
9. controller: RichEditorController = new RichEditorController();
11. @State show: boolean = false;
13. build() {
15. Column() {
17. RichEditor({controller: this.controller})
19. .defaultFocus(true)
21. .padding(0)
23. .height(56)
25. .width("90%")
27. .borderStyle(BorderStyle.Solid)
29. .borderColor(Color.Black)
31. .borderWidth(1)
33. .padding({left: 10})
35. .onReady(() => {
37. this.controller.addTextSpan(this.message, {
39. offset: this.controller.getCaretOffset(),
41. style:
43. {
45. fontColor: Color.Orange,
47. fontSize: 16
49. }
51. })
53. this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
55. })
57. .onSelectionChange((value:RichEditorRange) => {
59. console.log('光标位置改变了')
61. console.log('start: ' + value.start)
63. console.log('end: ' + value.end)
65. })
67. }
69. .width('100%')
71. }
73. }

复制代码

场景五：自由切换体系键盘和自定义键盘

效果图

方案
利用RichEditor的属性customKeyboard控制切换体系键盘还是自定义键盘，添加心情利用addImageSpan，删除内容利用deleteSpans，并通过获取光标地点位置举行删除。
核心代码

1. @Entry
3. @Component
5. struct Index {
7. @State message: string = 'Hello World';
9. controller = new RichEditorController()
11. @State showKeyboard:boolean = false;
13. private listData: (string | number | Resource)[] = [
15. $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
17. $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
19. $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
21. $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
23. $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
25. ];
27. // 自定义键盘组件
29. @Builder CustomKeyboardBuilder() {
31. Column() {
33. Text('自定义表情键盘')
35. .fontSize(25)
37. .fontWeight(900)
39. Grid() {
41. ForEach(this.listData, (item: string | number | Resource) => {
43. GridItem() {
45. if (typeof item !== 'number' && typeof item !== 'string') {
47. Image(item)
49. .width(30).onClick(() => {
51. this.controller.addImageSpan(item, { imageStyle: { size: ['110px', '110px'] } })
53. })
55. }
57. }
59. })
61. }.columnsGap(10).rowsGap(10).padding(5)
63. Row() {
65. Image($r('app.media.img_7'))
67. .width(30)
69. .onClick(() => {
71. this.controller.deleteSpans({start: this.controller.getCaretOffset() - 1, end: this.controller.getCaretOffset()})
73. })
75. }
77. .width('100%')
79. .justifyContent(FlexAlign.End)
81. .margin({ bottom: 40 })
83. }
85. .borderColor(Color.Gray)
87. .borderWidth(5)
89. }
91. build() {
93. Column() {
95. RichEditor({ controller: this.controller })
97. .width('100%')
99. .borderWidth(1)
101. .borderColor(Color.Black)
103. .onReady(() => {
105. this.controller.addTextSpan('有序排队')
107. })
109. .customKeyboard(this.showKeyboard ? this.CustomKeyboardBuilder() : undefined)
111. Button('切换系统键盘与自定义键盘').onClick((event: ClickEvent) => {
113. this.showKeyboard = ! this.showKeyboard
115. })
117. }
119. .height('100%')
121. }
123. }

复制代码

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