# 使用RichEditor组件获取HTML的内容和样式

#### 问题现象

在使用RichEditor组件时，需要将获取的字符串转换成HTML文本，再用RichEditor展示出HTML文本。

#### 背景知识

RichEditor是ArkUI中支持图文混排和文本交互式编辑的组件，主要用于图文混合内容的输入和文本交互式编辑的场景。

*   onReady在富文本组件初始化完成后触发;
*   onIMEInputComplete在输入法完成输入后触发。

#### 解决方案

在RichEditor组件中使用onReady和onIMEInputComplete回调函数获取输入内容，其中onReady(callback:Callback<void>)和onIMEInputComplete(callback:Callback<RichEditorTextSpanResult>)参数callback都不可省略。

具体实现步骤为：

1.  创建RichEditorController类的实例对象controller；
2.  在onReady回调函数中调用controller.addTextSpan方法传入HTML的内容部分data；
3.  在onIMEInputComplete回调函数中传入整个HTML标签字符串。

示例代码如下：

```
@Entry
@Component
struct RichEditorShow {
  private header: string = '<html>\n' +
    '<head>\n' +
    ' <meta charset=\'UTF-8\'>\n' +
    '</head>';
  private end: string = '</html>';
  @State data: string = '<h1 style= \'text-align: center; \'>h1标题</h1>' +
    '<h1 style=\'text-align: center;\'><i>h1斜体</i></h1>' +
    '<h1 style=\'text-align: center;\'><u>h1下划线</u></h1>' +
    '<h2 style=\'text-align: center;\'>h2标题</h2>' +
    '<h3 style=\'text-align: center;\'>h3标题</h3>';
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };

  build() {
    Flex({
      direction: FlexDirection.Column, alignItems: ItemAlign.Start,
      justifyContent: FlexAlign.Start
    }) {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .width('100%')
        .height(300)
        .backgroundColor(0XBDDB69);
      RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan(this.data,
            {
              style:
              {
                fontColor: Color.Orange,
                fontSize: 18
              }
            });
        })
        .onIMEInputComplete((value: RichEditorTextSpanResult) => {
          this.data = this.header + value.value + this.end;
        })
        .borderWidth(1)
        .borderColor(Color.Green)
        .width('100%')
        .height(400);
    };
  }
}
```