HarmonyOS鸿蒙Next中RichEditor实现“@xxx”替换成图片使用的功能

【背景知识】

• RichEditor添加图片内容可以使用addImageSpan，由于该API是同步方法，网络图片加载是异步过程，直接传入网络URL可能导致图片无法立即加载显示，无法即时获取到图片尺寸信息进行布局计算，故不建议直接添加网络图片。
• 可以使用http将网络图片下载到本地，然后调用image.createImageSource方法创建图片资源，最后调用addImageSpan添加图片。

【解决方案】

• 方案一：若网络图片资源加载正常且性能表现可接受，可直接使用网络图片，示例代码如下：

@Entry
@Component
struct Index9 {
  controller: RichEditorController = new RichEditorController()
  options: RichEditorOptions = { controller: this.controller }
  build() {
    Column() {
      Column() {
        RichEditor(this.options)
          .onReady(() => {
            this.controller.addTextSpan('点击按钮在此处添加image。', {
              style: {
                fontColor: Color.Black,
                fontSize: 15
              }
            })
          })
          .width(300)
          .height(100)
        Button('addImageSpan', {
          buttonStyle: ButtonStyleMode.NORMAL
        })
          .height(30)
          .fontSize(13)
          .onClick(() => {
            this.controller.addImageSpan("http://www.baidu.com/img/bdlogo.png", {
              imageStyle: {
                size: ["57px", "57px"]
              }
            })
          })
      }.width('100%')
    }.height('100%')
  }
}

• 方案二：RichEditor添加图片前先做预处理，将网络图片下载下来赋值给一个状态变量pixelMap，最后通过richEditorController.addImageSpan加载下载的网络图片。示例代码如下：

import { http } from '@kit.NetworkKit';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Index9 {
  controller: RichEditorController = new RichEditorController()
  options: RichEditorOptions = { controller: this.controller }
  pixelMap: PixelMap | null = null
  
  async loadNetworkImage(url: string): Promise<void> {
    let data = await http.createHttp().request(url);
    let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
    this.pixelMap = await image.createImageSource(imageBuffer).createPixelMap();
  }
  
  aboutToAppear(): void {
    this.loadNetworkImage("http://www.baidu.com/img/bdlogo.png")
  }
  
  build() {
    Column() {
      Column() {
        RichEditor(this.options)
          .onReady(() => {
            this.controller.addTextSpan('点击按钮在此处添加image。')
          })
          .width(300)
          .height(100)
        Button('addImageSpan')
          .height(30)
          .fontSize(13)
          .onClick(() => {
            this.controller.addImageSpan(this.pixelMap, {
              imageStyle: {
                size: ["57px", "57px"]
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}