#鸿蒙学习大百科#如何监听RichEditor添加图文变化前和图文变化后可触发的回调？

import { JSON } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };

  build() {
    Column() {
      RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan('组件内图文变化前，触发回调。\n图文变化后，触发回调。', {
            style: {
              fontColor: Color.Black,
              fontSize: 15
            }
          })
        })
        .onWillChange((value: RichEditorChangeValue) => {
          this.controller.addTextSpan('组件内图文变化前，触发回调：\n' + JSON.stringify(value), {
            style: {
              fontColor: Color.Gray,
              fontSize: 10
            }
          })
          return true;
        })
        .onDidChange((rangeBefore: TextRange, rangeAfter: TextRange) => {
          this.controller.addTextSpan('\n图文变化后，触发回调：\nrangeBefore:' + JSON.stringify(rangeBefore) + '\nrangeAfter：' + JSON.stringify(rangeBefore), {
            style: {
              fontColor: Color.Gray,
              fontSize: 10
            }
          })
          return true;
        })
        .width(300)
        .height(50)
      Text('查看回调内容：').fontSize(10).fontColor(Color.Gray).width(300)
      RichEditor(this.options)
        .width(300)
        .height(70)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}