HarmonyOS RichEditor组件能够像TextArea组件的onChange方法一样获取文字变化吗?

因富文本输入需求,在使用RichEditor替换TextArea时,发现没有onChange方法,无法同步获取输入框文字,业务需求有需要监听文字变化进行相关UI刷新,如是否显示输入框,展示@人弹窗等逻辑。

HarmonyOS
2024-10-22 09:32:41
1235浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

可参考:

@Builder  
function placeholderBuilder2() {  
  Row({ space: 2 }) {  
    Image($r("app.media.background")).width(24).height(24).margin({ left: -5 })  
    Text('okokokok').fontSize(10)  
  }.width('20%').height(50).padding(10).backgroundColor(Color.Red)  
}  
@Entry  
@Component  
struct Index {  
  controller: RichEditorController = new RichEditorController();  
  option: RichEditorOptions = { controller: this.controller };  
  private start: number = 2;  
  private end: number = 4;  
  @State content: string = ""  
  private my_offset: number | undefined = undefined  
  private my_builder: CustomBuilder = undefined  
  @Builder  
  placeholderBuilder() {  
    Row({ space: 2 }) {  
      Image($r("app.media.background")).width(24).height(24).margin({ left: -5 })  
      Text('Custom Popup').fontSize(10)  
    }.width(100).height(50).padding(5)  
  }  
  @Builder  
  MyMenu() {  
    Menu() {  
      MenuItem({ startIcon: $r("app.media.background"), content: "菜单选项1" })  
      MenuItem({ startIcon: $r("app.media.background"), content: "菜单选项2" })  
        .enabled(false)  
    }  
  }  
  build() {  
    Column() {  
      Column() {  
        Text("selection range:").width("100%")  
        Text("selection content:").width("100%")  
        Text() {  
          Span(this.content)  
        }.width("100%")  
      }  
      .borderWidth(1)  
      .borderColor(Color.Red)  
      .width("100%")  
      .height("20%")  
  
      Row() {  
        Button("获取选择内容 getSpans").onClick(() => {  
          this.content = ""  
          this.controller.getSpans({  
            start: this.start,  
            end: this.end  
          }).forEach(item => {  
            if (typeof (item as RichEditorImageSpanResult)['imageStyle'] != 'undefined') {  
              if ((item as RichEditorImageSpanResult).valueResourceStr == "") {  
                console.info("builder span index " + (item as RichEditorImageSpanResult).spanPosition.spanIndex + ", range : " + (item as RichEditorImageSpanResult).offsetInSpan[0] + ", " +  
                (item as RichEditorImageSpanResult).offsetInSpan[1] + ", size : " + (item as RichEditorImageSpanResult).imageStyle[0] + ", " + (item as RichEditorImageSpanResult).imageStyle[1])  
              } else {  
                console.info("image span " + (item as RichEditorImageSpanResult).valueResourceStr + ", index : " + (item as RichEditorImageSpanResult).spanPosition.spanIndex + ", range: " +  
                (item as RichEditorImageSpanResult).offsetInSpan[0] + ", " + (item as RichEditorImageSpanResult).offsetInSpan[1] + ", size : " +  
                (item as RichEditorImageSpanResult).imageStyle.size[0] + ", " + (item as RichEditorImageSpanResult).imageStyle.size[1])  
              }  
            } else {  
              this.content += (item as RichEditorTextSpanResult).value;  
              this.content += "\n"  
              console.info("text span: " + (item as RichEditorTextSpanResult).value)  
            }  
          })  
        })  
      }  
      .borderWidth(1)  
      .borderColor(Color.Red)  
      .width("100%")  
      .height("10%")  
  
      Column() {  
        RichEditor(this.option)  
          .onReady(() => {  
            this.controller.addTextSpan("0123456789",  
              {  
                style:  
                {  
                  fontColor: Color.Orange,  
                  fontSize: 30  
                }  
              })  
            this.controller.addImageSpan($r("app.media.background"),  
              {  
                imageStyle:  
                {  
                  size: ["57px", "57px"]  
                }  
              })  
          })  
          .borderWidth(1)  
          .borderColor(Color.Red)  
          .width("100%")  
          .height("70%")  
      }  
    }  
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
分享
微博
QQ
微信
回复
2024-10-22 18:10:44


相关问题
Web组件获取高度不一样
3177浏览 • 1回复 待解决
JS swiper 怎么list一样动态添加item?
7106浏览 • 1回复 待解决
HarmonyOS Toggle组件onChange方法手动触发
1075浏览 • 1回复 待解决