RichEditor添加、删除、重载图片

import { Logger } from '../utils/Logger'; 
import inputMethod from '@ohos.inputMethod'; 
import { BusinessError } from '@ohos.base'; 
import image from '@ohos.multimedia.image' 
import testNapi from 'libentry.so' 
import resourceManager from '@ohos.resourceManager'; 
const TAG = 'demo' 
 
export const INDENT_MAX_LEVEL: number = 5; // 缩进最大的级数 
  
@Entry 
@Component 
struct Index { 
  controller: RichEditorController = new RichEditorController(); 
  @State pixelMap: image.PixelMap | Resource | undefined = undefined; 
  @State fontSize: number = 16; 
  @State fontColor: number = 0; 
  @State colorNum: number = 0; 
  @State styleNum: number = 0; 
  @State weightNum: number = 0; 
  @State decorationNum: number = 0; 
  @State numberA: number = 10; 
  @State curCareOffset: number = 0; // 当前光标的位置 
  // @State contentSelection: RichEditorSelection = null; 
  @State contentSelection: RichEditorSelection | null = null; 
  @State isCheck: boolean = false; 
  // @State pixelMap: undefined | image.PixelMap | Resource = undefined; 
  @State someFlag: boolean = true; 
  
  aboutToAppear() { 
    Logger.info(TAG, `i'm about to appear: `); 
  } 
  
  onPageShow() { 
    Logger.info(TAG, `I am show `); 
  } 
  
  build() { 
    Column() { 
      Scroll() { 
        RichEditor({ controller: this.controller }) 
          .width('100%') 
          .layoutWeight(1) 
          .focusable(true) 
          .aboutToIMEInput((value) => { 
            Logger.info(TAG, `aboutToIMEInput: ${JSON.stringify(value)}`); 
            return true; 
          }) 
          .onDragMove((event: DragEvent, extraParams: string) => { 
            Logger.debug(TAG, 'onDragMoving'); 
          }) 
          .onDrop((dragEvent: DragEvent, extraParams: string) => { 
            Logger.debug(TAG, 'onDrop'); 
          }) 
          .onIMEInputComplete((value) => { 
            Logger.info(TAG, `someMessage return value：++ ${JSON.stringify(value.value)} ++`); 
            this.controller.getSpans().forEach((span:RichEditorImageSpanResult | RichEditorTextSpanResult) => { 
              const nSpan:RichEditorTextSpanResult = span as RichEditorTextSpanResult; 
              Logger.info(TAG, `someMessage uispan：${JSON.stringify(nSpan)}`); 
            }) 
            Logger.info(TAG, `someMessage end :=====================================`); 
  
            // ----------------------------------------- 
          }) 
          .aboutToDelete((value) => { 
            Logger.info(TAG, `aboutToDelete： ${JSON.stringify(value)}`); 
            return true; 
          }) 
          .onDeleteComplete(() => { 
            Logger.info(TAG, `onDeleteComplete`); 
          }) 
          .onSelect((selection: RichEditorSelection) => { 
            Logger.info(TAG, `selection0：${selection.selection[0]}`); 
            Logger.info(TAG, `selection1：${selection.selection[1]}`); 
            Logger.info(TAG, `selectionSpan：${JSON.stringify(selection)}`); 
            this.contentSelection = selection; 
            Logger.info(TAG, `careoffset when multipul select：${this.controller.getCaretOffset()}`); 
            Logger.info(TAG, `haha`); 
          }) 
          .height('100%') 
          .borderWidth(1) 
      } 
      .width('100%') 
      .height('40%') 
      .borderWidth(1) 
  
      Row() { 
        Column() { 
          Row() { 
            Button("add image").onClick((v: ClickEvent) => { 
              this.controller.addImageSpan($r('app.media.app_icon'), { 
                offset: 0, 
                imageStyle: { 
                  size: [(100 + 'vp') as Dimension, (100 + 'vp') as Dimension], 
                  objectFit: ImageFit.Contain, 
                } 
              }); 
  
              Logger.info(TAG, `careoffset:${this.controller.getCaretOffset()}`) 
            }) 
  
            Button("reload image").onClick((v: ClickEvent) => { 
              this.controller.deleteSpans(); 
              this.controller.addImageSpan($r('app.media.app_icon'), { 
                offset: this.controller.getCaretOffset(), 
                imageStyle: { 
                  size: [(100 + 'vp') as Dimension, (100 + 'vp') as Dimension], 
                  objectFit: ImageFit.Contain, 
                } 
              }); 
  
              Logger.info(TAG, `careoffset:${this.controller.getCaretOffset()}`) 
            }) 
  
          }.width('100%') 
          .justifyContent(FlexAlign.SpaceAround) 
  
        } 
        .width('50%') 
        .margin({bottom:150}) 
        .borderWidth(1) 
        .borderColor(Color.Orange) 
  
      } 
      .width('100%') 
      .justifyContent(FlexAlign.SpaceAround) 
  
    }.width('100%') 
    .borderWidth(2) 
    .borderColor(Color.Gray) 
  } 
}