解决RichEditor输入换行符后监听异常的问题
=========================

#### 问题现象

正常输入文字如'1，2，3'等，inputStr都能准确获取，如果先输入一个换行符，再输入文字,如'1，2，3'，'1'这个文字就获取不到，再次输入'2'，'3'能监听到，如何解决该问题？

问题代码示例参考如下：

@Entry
@Component
struct StackExample {
  private controller: RichEditorController \= new RichEditorController()

  build() {
    Row() {
     _ // 输入框_
      RichEditor({ controller: this.controller })
        .backgroundColor(Color.Gray)
        .enterKeyType(EnterKeyType.NEW\_LINE)
        .width('100%')
        .constraintSize({
          maxHeight: 100,
          minHeight: 35
        })
        .defaultFocus(true)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) \=\> {
          event.keepEditableState() _// 保持输入状态_
        })
        .onIMEInputComplete((value: RichEditorTextSpanResult) \=\> {
       _   // 监听文字输入_
          const start \= value.offsetInSpan\[0\]
          const end \= value.offsetInSpan\[1\]
        _  // 获取输入的字符串_
          const inputStr \= value.value.substring(start, end)
        })
    }
    .width('100%')
    .height('100%')
  }
}

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/15/v3/bjIl7yT1RWGd8CGk9Y6EfQ/zh-cn_image_0000002628763130.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133948Z&HW-CC-Expire=86400&HW-CC-Sign=CA91808210B060779F1E0EB2817184AA8C19359805BA03878C6C2F2E9E2F273D "点击放大")

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/db/v3/nBDxk65oQguHx2oT_S2X5A/zh-cn_image_0000002658962443.png?HW-CC-KV=V1&HW-CC-Date=20260709T133948Z&HW-CC-Expire=86400&HW-CC-Sign=8CE3752A8751B5C44946BE4B03240AF506267662DA39A4F4576E40B1F1446F0F)

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/73/v3/22B3MPGGTiSXb3pPpylDNA/zh-cn_image_0000002628603234.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133948Z&HW-CC-Expire=86400&HW-CC-Sign=BD3197008187A88E634A12B62275D65D4FCA9F30E3CE3226B573B51EB2E76CD6 "点击放大")

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b/v3/JIQwt60CQcScmzsMmLKbUg/zh-cn_image_0000002658842497.png?HW-CC-KV=V1&HW-CC-Date=20260709T133948Z&HW-CC-Expire=86400&HW-CC-Sign=6222FD9B611B8C3D96E1DFC9382334A98998A6DCC12E9F521E956EAB42EBB056)

#### 背景知识

[RichEditor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor)支持图文混排和文本交互式编辑的组件。

*   [onSubmit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#onsubmit12)按下软键盘输入法回车键触发该回调。
*   [onDidIMEInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#ondidimeinput12)输入法完成输入时，触发回调。
*   [getSpans](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#getspans)获取span信息。
*   [onIMEInputComplete](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#onimeinputcomplete)：输入法完成输入后，触发回调。

#### 解决方案

onIMEInputComplete接口仅支持返回一个文本span的信息，存在\\n会触发span分裂，所以换行后监听异常。

1.  使用onDidIMEInput代替onIMEInputComplete，获取当前输入内容的范围。
2.  使用getSpans获取当前输入的内容并打印，实现监听。

@Entry
@Component
struct StackExample {
  private controller: RichEditorController \= new RichEditorController();

  build() {
    Row() {
    _  // 输入框_
      RichEditor({ controller: this.controller })
        .backgroundColor(Color.Gray)
        .enterKeyType(EnterKeyType.NEW\_LINE)
        .width('100%')
        .constraintSize({
          maxHeight: 100,
          minHeight: 35
        })
        .defaultFocus(true)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) \=\> {
          event.keepEditableState(); _// 保持输入状态_
        })
        .onDidIMEInput((value: TextRange) \=\> {
          const start \= value.start;
          const end \= value.end;
          const curSpans \= this.controller.getSpans({
            start: start,
            end: end
          });
          curSpans.forEach(item \=\> {
            if (typeof (item as RichEditorTextSpanResult)) {
              const cur \= item as RichEditorTextSpanResult;
              console.info("输入的字符: " \+ cur.value.substring(cur.offsetInSpan\[0\], cur.offsetInSpan\[1\]));
            }
          });
        });
    }
    .width('100%')
    .height('100%');
  }
}