HarmonyOS 鸿蒙Next RichEditor 插入类似网页hr标签样式的“分割线”功能后无法获取offset/index的解决方案

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next RichEditor 插入类似网页hr标签样式的“分割线”功能后无法获取offset/index的解决方案

我现在实现的方案：

```typescript
[@Builder](/user/Builder)
gapLineBuilder() {
  Column() {
    Divider().strokeWidth('1lpx').color(Color.Gray)
      .width('100%')
  }
  .width('100%')
  .justifyContent(FlexAlign.Center)
  .height(this.fontSize)
}

/**
 * 插入分割线
 */
insertGapLine() {
  let start = this.controller.getSelection().selection[0]
  let end = this.controller.getSelection().selection[1]
  let customBuilder: CustomBuilder = () => this.gapLineBuilder()
  this.controller.addBuilderSpan(customBuilder, {
    offset: start
  })
}

因为插入之后还需要持久化，所以需要记录下来所有样式的start和end。

但是通过getSpans是拿不到addBuilderSpan的内容的，如何拿到输入框中所有的分割线的下标（index/offset），成了一个问题，大家有没有好办法～


更多关于HarmonyOS 鸿蒙Next RichEditor 插入类似网页hr标签样式的“分割线”功能后无法获取offset/index的解决方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

由于当前接口规格不支持获取builder信息
推荐方案：

  1. 提诉求，富文本增加分割线功能
  2. 应用内部自己维护builder的索引范围，通过监听文本变化回调，自己更新索引位置。

若提述求，可按照如下模板提供相关信息：

【原始场景】要做一个什么业务功能，业务场景是什么样的，体验是什么样的，遇到了什么困难?

【影响】当前的困难影响是什么，阻塞？体验不好？UX不好？性能不好…是否有规避方案?

【业界对标】安卓怎么实现的，IOS怎么实现的?

更多关于HarmonyOS 鸿蒙Next RichEditor 插入类似网页hr标签样式的“分割线”功能后无法获取offset/index的解决方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是不是可以尝试在插入时，自己维护个数据结构，记录并保存所有样式的start和end，以及index等

想想都有点复杂，要处理所有插入，删除，粘贴等操作之后，操作的内容再和所有Spans的start和end做对比，再计算，感觉很麻烦，

在HarmonyOS鸿蒙系统中，Next RichEditor组件在插入类似网页<hr>标签样式的“分割线”功能后，可能会遇到无法正确获取该元素offset或index的问题。这通常是由于RichEditor内部对特殊元素的处理机制导致的。

针对此问题，一个可行的解决方案是通过自定义元素或特殊标记来处理分割线，并在插入时记录其位置。具体步骤如下：

  1. 自定义分割线元素：创建一个自定义的分割线元素，例如一个带有特定样式的Span或Div，而不是直接使用RichEditor的内置功能插入。

  2. 记录位置信息：在插入自定义分割线元素时，记录其位置信息（如index或相对于某个节点的offset）。这可以通过在插入操作前后获取文本内容长度差或利用RichEditor提供的事件机制来实现。

  3. 获取位置信息：在需要获取分割线位置时，根据之前记录的位置信息进行计算。注意考虑文本编辑过程中可能发生的变动，如插入、删除文本等。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部