社区或评论区使用RichEditor发布内容时获取编辑框内的内容

实现的是拿到RichEditor里面通过addBuilderSpan添加的数据,但是官方文档里面明确说明:不支持通过getSpans,getSelection,onSelection,aboutToDelete获取BuilderSpan信息,因此只能记录BuilderSpan数据所在的位置,再次调用addBuilderSpan。

场景有:缓存RichEditor的内容到另一个RichEditor、在发布时确定发布内容、退出编辑页面时是否要保存当前编辑的内容等。

HarmonyOS
2024-05-26 11:09:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
blue76

使用的核心API

RichEditor

核心代码解释

通过getSpans获取当前编辑器组件内spans的内容以及对应spanPosition.spanRange,记录下截断span的BuilderSpan的起始位置。

@Entry 
@Component 
struct getBuilderSpan { 
  editorController = new RichEditorController() 
  editorController1 = new RichEditorController() 
  private my_builder: CustomBuilder = undefined 
  @State my_offset: number = 1 
  @State name: string = 'yylx' 
  
  build() { 
    Column() { 
      RichEditor({ controller: this.editorController }) 
        .width('100%') 
        .height(50) 
        .backgroundColor(Color.Yellow) 
        .onReady(() => { 
          this.editorController.addTextSpan('有序排队') 
          this.editorController.addBuilderSpan(() => { 
            this.At(this.name) 
          }) 
          this.editorController.addTextSpan('盖亚!') 
        }) 
      RichEditor({ controller: this.editorController1 }) 
        .width('100%') 
        .height(50) 
        .backgroundColor(Color.Pink) 
        .margin({top: 50, bottom: 30}) 
      Button('addBuilderSpan').onClick((event: ClickEvent) => { 
        let getSpans = this.editorController.getSpans({ start: 0 }) 
        // console.log(`${JSON.stringify(getSpans)}`) 
        console.log('getSpans0' + JSON.stringify(getSpans[0])) 
        let span0 = getSpans[0] as RichEditorTextSpanResult 
        let spanRange0 = JSON.stringify(span0.spanPosition.spanRange[1]) 
        this.my_offset = Number(spanRange0) 
        let value0 = JSON.stringify(span0.value) 
        console.log(spanRange0, value0) 
  
        console.log('getSpans1' + JSON.stringify(getSpans[1])) 
        let span1 = getSpans[1] as RichEditorTextSpanResult 
        let spanRange1 = JSON.stringify(span1.spanPosition.spanRange) 
        let value1 = JSON.stringify(span1.value) 
        console.log(spanRange1, value1) 
  
        this.editorController1.addTextSpan(`${JSON.parse(value0)}${JSON.parse(value1)}`) 
  
        this.editorController1.addBuilderSpan(() => { 
          this.At(this.name) 
        }, {offset: this.my_offset}) 
      }) 
    } 
  } 
  
  @Builder 
  At(str: string) { 
    Stack() { 
      Text('@' + str).fontColor(Color.Blue) 
    } 
  } 
}

实现效果

适配版本信息

SDK:4.1.5.6

IDE:DevEco Studio 4.1.1.500

分享
微博
QQ
微信
回复
2024-05-27 10:55:38
相关问题
基于RichEditor评论编辑
215浏览 • 1回复 待解决
Native获取Rawfile内容并打印
389浏览 • 1回复 待解决
text内容如何实时获取并添加修改?
1866浏览 • 1回复 待解决
html sms标签跳转丢失&符号后内容
1848浏览 • 1回复 待解决
部署HAP上报安装内容过大错误
762浏览 • 1回复 待解决
函数内容没法toast!!!
6224浏览 • 3回复 待解决
长按滑动显示不同内容
408浏览 • 1回复 待解决
鸿蒙 | Text 内容显示问题
8700浏览 • 5回复 待解决
DBS如何查看增量备份内容
1313浏览 • 1回复 待解决
如何隐藏容器组件溢出内容
953浏览 • 1回复 待解决
Chart内容如何清空。谢谢。
1388浏览 • 1回复 待解决
Python 后台窗口内容输入
3109浏览 • 0回复 待解决
mac系统,ohpm下载内容缓存地址
610浏览 • 1回复 待解决
hilog如何打印{private}隐私标志内容
998浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
376浏览 • 1回复 待解决