HarmonyOS鸿蒙Next中RichEditor的内容获取及放入图片并且可以点击图片旁边的del便可以删除

HarmonyOS鸿蒙Next中RichEditor的内容获取及放入图片并且可以点击图片旁边的del便可以删除

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();
  option: RichEditorOptions = { controller: this.controller };
  private start: number = 2;
  private end: number = 4;
  @State message: string = "[-1, -1]";
  @State content: string = "";

  @Builder
  placeholderBuilder() {
    Row() {
      Image($r("app.media.b")).width('90%')
      Image($r('app.media.del')).onClick(() =>{
        const selection = this.controller.getSelection();
        if (selection) {
          const start= selection.selection[0]
          const end= selection.selection[1]
          this.controller.deleteSpans({start,end})
        }
      })
    }.width('100%').height(50).padding(5)
  }
  build() {
    Column() {
      Column() {
        RichEditor(this.option)
          .onReady(() => {
          })
          .onSelect((value: RichEditorSelection) => {
            this.start = value.selection[0];
            this.end = value.selection[1];
            this.message = "[" + this.start + ", " + this.end + "]";
          })
          .aboutToIMEInput((value: RichEditorInsertValue) => {
            return true;
          })
          .onIMEInputComplete((value: RichEditorTextSpanResult) => {
          })
          .aboutToDelete((value: RichEditorDeleteValue) => {
            return true;
          })
          .borderWidth(1)
          .borderColor(Color.Green)
          .width("100%")
          .height("30%")
        Button("add span")
          .onClick(() => {
            this.controller.addBuilderSpan(() => {
              this.placeholderBuilder()
            });
          })
      }
      .borderWidth(1)
      .borderColor(Color.Red)
      .width("100%")
      .height("70%")
    }
  }
}

点击del图片可以删除刚添加的图片而且输入的图片则直接换行并且可以获得RichEditor的完整内容并且可以计算总内容是否超过1000


更多关于HarmonyOS鸿蒙Next中RichEditor的内容获取及放入图片并且可以点击图片旁边的del便可以删除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，可通过RichEditorController的getText()方法获取富文本内容。插入图片使用insertImage()方法，需传入图片路径或资源ID。为图片添加删除功能，需自定义ImageSpan并监听点击事件，在点击del按钮时调用deleteText()方法删除对应图片及关联内容。删除逻辑需自行维护图片与文本的位置关系。

更多关于HarmonyOS鸿蒙Next中RichEditor的内容获取及放入图片并且可以点击图片旁边的del便可以删除的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，要实现RichEditor的内容获取、图片插入及删除功能，可以按照以下方式优化代码：

  1. 获取RichEditor内容： 使用controller.getContent()方法获取完整内容，建议在onSelect或按钮点击事件中调用：
this.content = this.controller.getContent();
  1. 图片插入换行处理： 在placeholderBuilder中添加换行符：
@Builder
placeholderBuilder() {
  Column() {
    Row() {
      Image($r("app.media.b"))
      Image($r('app.media.del')).onClick(() => {
        // 删除逻辑
      })
    }
    Text('\n') // 强制换行
  }
}
  1. 内容长度校验： 在添加内容前检查长度：
const MAX_LENGTH = 1000;
if (this.controller.getContent().length >= MAX_LENGTH) {
  console.log("内容超过限制");
  return;
}
  1. 删除功能优化： 当前删除逻辑是正确的，通过getSelection获取范围后调用deleteSpans：
const selection = this.controller.getSelection();
if (selection) {
  this.controller.deleteSpans({
    start: selection.selection[0],
    end: selection.selection[1]
  });
}

注意：确保图片资源路径正确，删除图标建议使用绝对定位使其显示在图片右上角。RichEditor的内容操作应在主线程执行，避免在异步回调中直接操作UI。

回到顶部