HarmonyOS 开发实践 —— 基于RichEditor的评论编辑

原创

小帅聊鸿蒙

发布于 2024-12-17 16:55:51

2710

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

场景描述

RichEditor是支持图文混排和文本交互式编辑的组件，在使用APP中是很常见的，如评论区编辑内容发布、对话框或者聊天室。下面列举一些具体的场景需求。

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

方案

通过addTextSpan来添加文字。
通过addImageSpan来添加图片。
通过addBuilderSpan来实现一段内容，光标不可插入的效果。
addTextSpan等支持gesture等手势操作，比如onClick点击和onLongPress长按事件。

核心代码

由于RichEditor是支持图文混排的，所以RichEditor里面的内容也就是由Text和Image组成，分别通过addTextSpan和addImageSpan添加，而且还可以设置字体和图片样式，如下代码：

@Entry
@Component
struct getSpans {
  editorController = new RichEditorController()
 
  build() {
    Column() {
      RichEditor({ controller: this.editorController })
        .width('100%')
        .backgroundColor(Color.Yellow)
        .onReady(() => {
          this.editorController.addImageSpan($r('app.media.icon'),
            {
              imageStyle:
              {
                size: ['100px', '100px']
              }
            })
          this.editorController.addTextSpan('官方客服',
            {
              style:
              {
                fontColor: Color.Blue,
                fontSize: 30
              }
            })
        })
      Button('getSpans-图片')
       .onClick((event: ClickEvent) => {
          let getSpans = this.editorController.getSpans({ start: 0 })
          console.log('getSpans0' + JSON.stringify(getSpans[0]))
          // 必须进行强转才能获取文字信息或者图片信息
          let span0 = getSpans[0] as RichEditorTextSpanResult
          console.log('图片相关的信息: ' + JSON.stringify(span0))
      })
      Button('getSpans-文字')
       .onClick((event: ClickEvent) => {
         let getSpans = this.editorController.getSpans({ start: 0 })
         console.log('getSpans1' + JSON.stringify(getSpans[1]))
         let span1 = getSpans[1] as RichEditorImageSpanResult
         console.log('文字相关的信息: ' + JSON.stringify(span1))
      })
    }
  }
}

在常见的评论区艾特好友时，会将“@华为官方客服”视作一个整体，光标无法插入其中，且第一次按删除键时整体会高亮选中，第二次再按删除键才会删除。

需要注意的是，如果使用的全局@Builder，则需要配合bind(this)使用。后续也可以通过事件阻止，即RichEditor控件ClickEvent/TouchEvent支持preventDefault。

@Entry
@Component
struct BuilderSpan {
  editorController = new RichEditorController()
 
  @Builder
  At(str: string) {
    Stack() {
      Text('@' + str).fontColor(Color.Blue)
    }
  }
 
  build() {
    Column() {
      RichEditor({ controller: this.editorController })
        .width('100%')
        .height(50)
        .backgroundColor(Color.Yellow)
        .onReady(() => {
          this.editorController.addBuilderSpan(() => {
            this.At('华为官方客服')
          })
          this.editorController.addTextSpan('！！！')
        })
    }
  }
}

输入表情、超链接、文字等一起的内容。

@Entry
@Component
struct Index {
  @State message: string = '#社区#';
  controller: RichEditorController = new RichEditorController();
  @State show: boolean = false;
 
  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .height(56)
        .width('90%')
        .borderStyle(BorderStyle.Solid)
        .borderColor(Color.Black)
        .borderWidth(1)
        .onReady(() => {
        })
      Button('输入表情').onClick((event: ClickEvent) => {
        this.controller.addImageSpan($r('app.media.app_icon'), {
          imageStyle: {
            size: ['80px', '80px']
          }
        })
      })
      Button('超链接').onClick((event: ClickEvent) => {
        this.controller.addTextSpan(this.message, {
          offset: this.controller.getCaretOffset(),
          style:
          {
            fontColor: Color.Orange,
            fontSize: 16
          },
          gesture:
          {
            onClick: () => {
              console.log('跳转链接')
            },
            onLongPress: () => {
              console.log('被长按了')
            }
          }
        })
        this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
      })
    }
    .width('100%')
  }
}

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

效果图

方案

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

核心代码

import promptAction from '@ohos.promptAction';
 
@Component
export struct SceneTwo {
  @State message: string = 'string';
  controller: RichEditorController = new RichEditorController();
  @State getContentLength: number = 0;
  @State BOnSt: promptAction.ShowToastOptions = { 'message': '已超出内容最大限制.' }
 
  build() {
    NavDestination() {
      Column() {
        RichEditor({ controller: this.controller })
          .height(100)
          .borderWidth(1)
          .borderColor(Color.Red)
          .width('100%')
          .overlay(this.getContentLength + '/20', {
            align: Alignment.BottomEnd
          })
          .aboutToIMEInput((value: RichEditorInsertValue) => {
            console.log('insertOffset:' + JSON.stringify(value.insertValue))
            // 插入的文本偏移位置。
            if (this.getContentLength < 20) {
              this.getContentLength = this.getContentLength + value.insertValue.length
              console.log('实时的内容长度：' + this.getContentLength)
              return true
            }
            promptAction.showToast(this.BOnSt)
            return false
          })
          .aboutToDelete((value: RichEditorDeleteValue) => {
            console.log('删除：' + JSON.stringify(value))
            this.getContentLength = this.getContentLength - value.length
            return true
          })
      }
      .width('100%')
    }.title('场景二')
  }
}

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

效果图

方案

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

核心代码

import { HashMap } from '@kit.ArkTS';
 
@Component
export struct SceneThree {
  controller: RichEditorController = new RichEditorController();
 
  @Builder
  At(str: string) {
    Stack() {
      Text('@' + str).fontColor(Color.Blue)
    }
    .onClick(() => {
      // 添加不同的身份信息
      const hashMap: HashMap<string, number> = new HashMap();
      hashMap.set('friend1', 123);
      let result = hashMap.get('friend1');
      console.log('result: ' + result)
    })
  }
 
  build() {
    NavDestination() {
      Column() {
        RichEditor({ controller: this.controller })
          .height(100)
          .borderWidth(1)
          .borderColor(Color.Red)
          .width('100%')
        Button('好友1').onClick((event: ClickEvent) => {
          this.controller.addBuilderSpan(() => {
            this.At('华为官方客服')
          })
        })
        Button('好友2').onClick((event: ClickEvent) => {
          this.controller.addBuilderSpan(() => {
            this.At('华为官方客服')
          })
        })
      }
      .width('100%')
    }.title('场景三')
 
  }
}

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

方案

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

核心代码

@Component
export struct SceneFour {
  @State message: string = '光标位置';
  controller: RichEditorController = new RichEditorController();
  @State show: boolean = false;
 
  build() {
    NavDestination() {
      Column() {
        RichEditor({ controller: this.controller })
          .defaultFocus(true)
          .padding(0)
          .height(56)
          .width('90%')
          .borderStyle(BorderStyle.Solid)
          .borderColor(Color.Black)
          .borderWidth(1)
          .padding({ left: 10 })
          .onReady(() => {
            this.controller.addTextSpan(this.message, {
              offset: this.controller.getCaretOffset(),
              style:
              {
                fontColor: Color.Orange,
                fontSize: 16
              }
            })
            this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
          })
          .onSelectionChange((value: RichEditorRange) => {
            console.log('光标位置改变了')
            console.log('start: ' + value.start)
            console.log('end: ' + value.end)
          })
      }
      .width('100%')
    }.title('场景四')
  }
}

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

效果图

方案

使用RichEditor的属性customKeyboard控制切换系统键盘还是自定义键盘，添加表情使用addImageSpan，删除内容使用deleteSpans，并通过获取光标所在位置进行删除。

核心代码

@Component
export struct SceneFive {
  controller = new RichEditorController()
  @State showKeyboard: boolean = false;
  private listData: (string | number | Resource)[] = [
    $r('app.media.img_1'), $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'),
    $r('app.media.img_1'), $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'),
    $r('app.media.img_1'), $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'),
    $r('app.media.img_1'), $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'),
    $r('app.media.img_1'), $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'),
  ];
 
  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Text('自定义表情键盘')
        .fontSize(25)
        .fontWeight(900)
      Grid() {
        ForEach(this.listData, (item: string | number | Resource) => {
          GridItem() {
            if (typeof item !== 'number' && typeof item !== 'string') {
              Image(item)
                .width(30).onClick(() => {
                this.controller.addImageSpan(item, { imageStyle: { size: ['110px', '110px'] } })
              })
            }
          }
        })
      }.columnsGap(10).rowsGap(10).padding(5)
 
      Row() {
        Image($r('app.media.img_10'))
          .width(30)
          .onClick(() => {
            this.controller.deleteSpans({
              start: this.controller.getCaretOffset() - 1,
              end: this.controller.getCaretOffset()
            })
          })
          .borderRadius(1)
          .borderWidth(1)
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
      .margin({ bottom: 40 })
    }
    .borderColor(Color.Gray)
    .borderWidth(5)
  }
 
  build() {
    NavDestination() {
      Column() {
        RichEditor({ controller: this.controller })
          .width('100%')
          .borderWidth(1)
          .borderColor(Color.Black)
          .onReady(() => {
            this.controller.addTextSpan('有序排队')
          })
          .customKeyboard(this.showKeyboard ? this.CustomKeyboardBuilder() : undefined)
        Button('切换系统键盘与自定义键盘').onClick((event: ClickEvent) => {
          this.showKeyboard = !this.showKeyboard
        })
      }
      .height('100%')
    }.title('场景五')
  }
}

常见问题

Q：addTextSpan后光标位置异常。

A：RichEditor组件在调用addTextSpan后，按照用户习惯，光标的位置应该是在添加内容的末尾的，但是RichEditor一开始没有做光标位置的适配，需要开发者自己去通过getCaretOffset获取光标所在的位置再去addTextSpan，再通过setCaretOffset去设置光标所在的位置。

RichEditor({ controller: this.controller })
  .height(100)
  .borderWidth(1)
  .borderColor(Color.Red)
  .width('100%')
  .onReady(() => {
    this.controller.addTextSpan(this.message, {
      offset: this.controller.getCaretOffset(),
      style:
      {
        fontColor: Color.Orange,
        fontSize: 16
      }
    })
    this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
  })
  .onSelectionChange((value: RichEditorRange) => {
    console.log('start: ' + value.start)
    console.log('end: ' + value.end)
  })

Q：被动地让编辑框获焦弹出键盘和失焦收起键盘，光标也会一起闪烁和消失。

A：可以通过focusControl.requestFocus来控制编辑框的获焦和失焦。

RichEditor({ controller: this.controller })
  .copyOptions(CopyOptions.None)
  .key('RichEditor')
  .height(100)
  .borderWidth(1)
  .borderColor(Color.Red)
  .width('60%')
  .onSelect((value: RichEditorSelection) => {
  })
}
Button('点我获取焦点').onClick((event: ClickEvent) => {
  focusControl.requestFocus('RichEditor')
})

Q：在RichEditor的onPaste中调用event?.preventDefault?.()不允许粘贴，长按选中的内容进行粘贴，点击粘贴后希望和粘贴前保持一致，选中并不处理，高亮仍然保留。

A：点击粘贴后是会重置选中区，并且光标闪烁，可以调用onSelectionChange+setSelection自行实现。

核心代码：

@Entry
@Component
struct SameNameDemo {
  @State message: string = '光标位置';
  controller: RichEditorController = new RichEditorController();
  @State start: number = 0
  @State end: number = 0
 
  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .height(100)
        .borderWidth(1)
        .borderColor(Color.Red)
        .width('100%')
        .onReady(() => {
          this.controller.addTextSpan('华为开发者')
        })
        .onSelectionChange((value: RichEditorRange) => {
          let realStart = Number(value.start)
          let realEnd = Number(value.end)
          if (realStart !== realEnd) {
            this.start = realStart
            this.end = realEnd
          }
        })
        .onPaste((event?: PasteEvent) => {
          if (event !== undefined && event.preventDefault) {
            event.preventDefault()
            console.log('start: ' + this.start, 'end: ' + this.end)
          }
          setTimeout(() => {
            this.controller.setSelection(this.start, this.end)
          }, 0)
        })
      Button('高亮').onClick((event: ClickEvent) => {
        this.controller.setSelection(this.start, this.end)
      })
    }
    .width('100%')
  }
}