​

展示效果：

​

首先build外面写一个控制器，用于控制RichEditor组件

 // 组件控制器
  controllerRichX2: RichEditorController = new RichEditorController();
  

然后build内部直接写RichEditor组件，里面放上我们刚刚写的控制器

 RichEditor({ controller:this.controllerRichX2)
 

接着我调整了一下样式：

 RichEditor({controller:this.controllerRichX2}).height(39) .borderRadius(7) .borderWidth(1) .borderColor('#E4E5E5') .backgroundColor("#FFFFFF")
 

然后给RichEditor加上这个属性：onDidChange属性，这是最关键的地方，value的值，我测试了很多次，value.start等于0同时value.end不等0时，说明输入框是有值的

• 为什么要做这个判断，是为了，输入框没值的时候，给个默认值。有值的时候附上值。
• 关键点：控制器还有一个getSpans方法，接着forEach，以下是onDidChange属性的代码：

.onDidChange((value) => {
  // AlertDialog.show({message:JSON.stringify(value)})
  // console.log('onDidChange:Before:', JSON.stringify(value))
  // console.log('onDidChange:After:', JSON.stringify(rangeAfter))
  let ButStart = value.start
  let ButEnd = value.end
  if (value.start === 0 && value.end !== 0) {
    this.ButtonShowX2 = false // 删除的没有东西时，我是一个个测试出来的啊兄弟，帅吧
    this.RichEditorX2 = '2'
  } else {
    this.ButtonShowX2 = true
  }
  if (this.ButtonShowX2 === true) {
    this.controllerRichX2.getSpans({
      start: -1,
      end: -1
    }).forEach(item=>{
      const textMsg: string = (item as RichEditorTextSpanResult).value
      // promptAction.showToast({message:textMsg})
      // promptAction.showToast({message:textMsg.length.toString()})
      this.textMsgLengthX2 = textMsg.length // 输入字符串的长度
      this.RichEditorX2 = textMsg
      // if (textMsg.length !== 0) {
      //   this.HalfWidthSpace.repeat(textMsg.length)
      // }
    })
  }
})

接下来是需要的状态变量：

 @Local RichEditorX2:string = '2' // X中的2 给了一个默认值2
 @Local ButtonShowX2: boolean = false // 得知输入框中是否有值，我一个个测出来的啊，我去，浪费了好多时间
 @Local HalfWidthSpace: string = '\u0020' // 角空格
 @Local textMsgLengthX2: number = 0 // 输入字符串的长度
 

接着呢有一个问题点H₂O和X²我们在输入框输入字符串或者数字的时候，H和O之间是不会自动有空格的，所以需要我们写一个方法来判断输入的长度给对应的空格

// 根据输入框中的内容生成空格方法
  generateSpaces(MsgLength: number): string {
    // 当MsgLength为0时，返回原始的单个空格
    if (MsgLength === 0) {
      return '\u0020';
    }
    // 当MsgLength不为0时，生成Msg的长度的空格
    return '\u0020'.repeat(MsgLength);
  }
  

下面是完整代码demo：后面还有总结需要注意的点

@Entry
@ComponentV2
struct Index {
  // 组件控制器
  controllerRichH2O: RichEditorController = new RichEditorController();
  controllerRichX2: RichEditorController = new RichEditorController();
  @Local RichEditorX2:string = '2' // X中的2
  @Local RichEditorH20:string = '2' // H₂O中的2
  @Local ButtonShowH2O: boolean = false // 得知输入框中是否有值，我一个个测出来的啊，我去，浪费了好多时间
  @Local ButtonShowX2: boolean = false // 得知输入框中是否有值，我一个个测出来的啊，我去，浪费了好多时间
  @Local HalfWidthSpace: string = '\u0020' // 角空格
  @Local textMsgLengthH20: number = 0 // 输入字符串的长度
  @Local textMsgLengthX2: number = 0 // 输入字符串的长度

  // 根据输入框中的内容生成空格方法
  generateSpaces(MsgLength: number): string {
    // 当MsgLength为0时，返回原始的单个空格
    if (MsgLength === 0) {
      return '\u0020';
    }
    // 当MsgLength不为0时，生成Msg的长度的空格
    return '\u0020'.repeat(MsgLength);
  }

  build() {
    Column() {

      Column({space:60}){
        Text('问题：基于RichEditor，如何实现上下角标的输入').width('100%')

        // X²中的2 的实时输入实现
        Column(){
          Row(){
            Text('上角标的实时输入,')
            Stack(){
              Text('X')
              Text(this.RichEditorX2).fontSize(8).translate({x:'80%',y:'-20%'})
            }.alignContent(Alignment.TopEnd)
            Text(`${this.generateSpaces(this.textMsgLengthX2)}中的2`)
          }.width('100%')
          RichEditor({
            controller:this.controllerRichX2
          }).height(39).borderRadius(7).borderWidth(1).borderColor('#E4E5E5').backgroundColor("#FFFFFF")
            .onDidChange((value) => {
              if (value.start === 0 && value.end !== 0) {
                this.ButtonShowX2 = false // 删除的没有东西时，我是一个个测试出来的啊兄弟，帅吧
                this.RichEditorX2 = '2'
              } else {
                this.ButtonShowX2 = true
              }
              if (this.ButtonShowX2 === true) {
                this.controllerRichX2.getSpans({
                  start: -1,
                  end: -1
                }).forEach(item=>{
                  const textMsg: string = (item as RichEditorTextSpanResult).value
                  this.textMsgLengthX2 = textMsg.length // 输入字符串的长度
                  this.RichEditorX2 = textMsg
                })
              }
            })
        }

        // H₂O中的2 的实时输入实现
        Column(){
          Row(){
            Text('下角标的实时输入,')
            Stack(){
              Text('H')
              Text(this.RichEditorH20).fontSize(8).translate({x:'80%',y:'-20%'})
            }.alignContent(Alignment.BottomEnd)
            Text(`${this.generateSpaces(this.textMsgLengthH20)}O中的2`) // \u0020 半角空格 HalfWidthSpace
          }.width('100%')
          RichEditor({
            controller:this.controllerRichH2O
          }).height(39).borderRadius(7).borderWidth(1).borderColor('#E4E5E5').backgroundColor("#FFFFFF")
            .onDidChange((value) => {
              if (value.start === 0 && value.end !== 0) {
                this.ButtonShowH2O = false // 删除的没有东西时，我是一个个测试出来的啊兄弟，帅吧
                this.RichEditorH20 = '2'
              } else {
                this.ButtonShowH2O = true
              }
              if (this.ButtonShowH2O === true) {
                this.controllerRichH2O.getSpans({
                  start: -1,
                  end: -1
                }).forEach(item=>{
                  const textMsg: string = (item as RichEditorTextSpanResult).value
                  this.textMsgLengthH20 = textMsg.length // 输入字符串的长度
                  this.RichEditorH20 = textMsg
                })
              }
            })
        }

        Text(`我默认了上角标和下角标都为2，通过RichEditor输入框可以实时更改上下角标的值`).width('100%')
      }
    }.padding({left:20,right:20,top:20}).height('100%').width('100%')
  }
}

总结需要注意的点：

• 组件控制器：

• ondidChange属性的value的值：

         (start为0同时end不为0，说明输入框没有值)，其他情况就是输入框有值

• 获取输入的实时输入数据：用控制器的getSpans方法解决

• 以及获取后输入赋值:getSpans后直接.ForEach，这是在遍历输入框里的值，然后就可以赋值了

• 接着就是赋值后的空格问题：如H₂O，如果输入了值的话，不解决空格的话，H和O之间不会因为输入了值就自动撑开。写一个根据输入框中的内容长度方法即可解决

​