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

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

HarmonyOS
2024-10-22 09:32:41
浏览
收藏 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%")  
      }  
    }  
  }
分享
微博
QQ
微信
回复
2024-10-22 18:10:44
相关问题
Web组件获取高度不一样
2142浏览 • 1回复 待解决
JS swiper 怎么list一样动态添加item?
6245浏览 • 1回复 待解决
如何获取Text组件文字宽度
2049浏览 • 1回复 待解决