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

📚往期学习笔录📝：

📝 鸿蒙（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：

@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) =&