RichEditor添加、删除、重载图片

实现添加,删除,重载图片。

HarmonyOS
2024-05-26 10:59:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
易安安安

使用的核心API

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) 
  } 
}

适配版本信息

IDE:DevEco Studio 4.1.1.300

SDK:4.1.2.1

分享
微博
QQ
微信
回复
2024-05-27 10:40:12
相关问题
HarmonyOS元服务添加删除功能
762浏览 • 1回复 待解决
怎样删除添加的Module?
771浏览 • 1回复 待解决
如何给按钮添加图片
5587浏览 • 4回复 待解决
图片如何添加渐变模糊
1938浏览 • 1回复 待解决
TabList可以添加图片么?
7894浏览 • 3回复 待解决
鸿蒙-富文本如何添加图片
7122浏览 • 1回复 待解决
HarmonyOS是否支持图片添加水印
334浏览 • 1回复 待解决
Flutter 热重载方法有哪些?
362浏览 • 1回复 待解决
自定义组件中如何添加图片
2597浏览 • 1回复 待解决