HarmonyOS 鸿蒙Next中RichEditor实现同时设置删除线和下划线

【背景知识】

RichEditor支持图文混排和文本交互式编辑的组件，RichEditorController是RichEditor组件的控制器，RichEditorStyledStringController是使用属性字符串构建的RichEditor组件的控制器，均继承自RichEditorBaseController，两种控制器都可以实现同时设置删除线与下滑线。

【解决方案】

RichEditorStyledStringController实现方案可参考官网设置装饰线来实现。如果项目中是用RichEditorController来初始化RichEditor，想要实现同时设置两种装饰线，可使用fromStyledString方法将属性字符串转换为span信息，通过addTextSpan方法添加到RichEditor组件。示例代码如下：

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct RichEditorExample {
  private richEditorController: RichEditorController = new RichEditorController();
  private mutString: MutableStyledString = new MutableStyledString('设置富文本多装饰线', [
    {
      start: 0,
      length: 9,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({ fontSize: LengthMetrics.vp(25) })
    },
    {
      start: 0,
      length: 5,
      styledKey: StyledStringKey.DECORATION,
      styledValue: new DecorationStyle(
        {
          type: TextDecorationType.Underline,
        },
        {
          // 开启多装饰线
          enableMultiType: true
        }
      )
    },
    {
      start: 2,
      length: 4,
      styledKey: StyledStringKey.DECORATION,
      styledValue: new DecorationStyle(
        {
          type: TextDecorationType.LineThrough,
        },
        {
          // 开启多装饰线
          enableMultiType: true
        }
      )
    },
  ])

  private isTextSpanResult(item: RichEditorImageSpanResult | RichEditorTextSpanResult): boolean {
    return typeof (item as RichEditorImageSpanResult)['imageStyle'] == 'undefined';
  }

  build() {
    Column() {
      RichEditor({ controller: this.richEditorController })
      Button("调用fromStyledString").onClick(() => {
        try {
          // 将属性字符串转换成span信息
          let spans = this.richEditorController.fromStyledString(this.mutString)
          // 通过for循环拿出属性字符串的装饰信息，添加到richEditorController
          spans.forEach((item: RichEditorTextSpanResult | RichEditorImageSpanResult, index) => {
            if (this.isTextSpanResult(item)) {
              let richSpan = item as RichEditorTextSpanResult
              this.richEditorController.addTextSpan(richSpan.value, {
                style:
                {
                  fontColor: richSpan.textStyle?.fontColor,
                  fontSize: richSpan.textStyle?.fontSize,
                  decoration: richSpan.textStyle.decoration
                }
              })
            }
          })
        } catch (error) {
          console.error('fromStyledString error')
        }
      })
    }
  }
}