HarmonyOS 鸿蒙Next TextArea 如何展示富文本

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

HarmonyOS 鸿蒙Next TextArea 如何展示富文本 需要做一个标签功能，看了下示例代码的内容发布器是用RichEditor做的，删除时会删掉整个标签，期望是能够删除时去掉高亮，逐字删除，类似于小红书的效果（见附件）

初步想法是通过在Text上叠加一个文字透明的TextArea 来实现，通过Text来实现富文本展示，但是感觉有点繁琐；请问下TextArea可以直接实现富文本展示吗？

Harmonyos Next教程
2 回复 
楼主你好，可以试下下面的代码

```kotlin
[@Entry](/user/Entry)
[@Component](/user/Component)
struct RichEditorPage {
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  private tagMap: string[] = ["搞笑", "话题", "幽默风趣"]
  [@State](/user/State) showTagSheet: boolean = false

  private readonly tagColor: string = "#FF0000FF"
  private readonly normalColor: string = "#FF000000"
  [@Builder](/user/Builder) tagSheet() {
    Column() {
      ForEach(this.tagMap, (item: string) => {
        Text(item)
          .fontSize(25)
          .onClick(() => {
            this.showTagSheet = false
            let curIndex = this.controller.getCaretOffset()
            this.controller.deleteSpans({start: curIndex - 1, end: curIndex})
            this.controller.addTextSpan("#" + item, {
              offset: curIndex - 1,
              style: {
                fontColor: this.tagColor
              }
            })
            this.controller.addTextSpan(" ", {
              offset: curIndex + item.length,
              style: {
                fontColor: this.normalColor,
              }
            })
          })
        Divider()
      })
    }
    .width('100%')
    .height('100%')
  }
  build() {
    RelativeContainer() {
      RichEditor(this.options)
        .placeholder('请输入内容')
        .aboutToIMEInput((value: RichEditorInsertValue) => {
          if (value.insertValue === "#") {
            this.showTagSheet = true
          }
          return true
        })
        .width('100%')
        .height("100%")
        .backgroundColor(Color.White)
        .id("rich_editor")
    }
    .backgroundColor(Color.Gray)
    .bindSheet(this.showTagSheet, this.tagSheet(), {
      shouldDismiss: () => {
        this.showTagSheet = false
      }
    })
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next TextArea 如何展示富文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，展示富文本内容于TextArea组件，通常需要使用特定的组件或方法，因为TextArea原生并不直接支持富文本格式。以下是实现该功能的简要说明：

HarmonyOS提供了RichText组件用于展示富文本内容。你可以通过RichText组件来展示包含不同样式（如字体、颜色、大小、加粗等）的文本。要实现这一点，你需要使用RichText的Span（或其子类）来定义文本的样式和内容。

具体步骤如下：

  1. 定义富文本内容：使用Span或其子类（如ForegroundColorSpan、BackgroundColorSpan、StyleSpan等）来定义文本的各个部分及其样式。

  2. 创建RichText对象：将这些Span对象与相应的文本内容结合，创建出RichText对象。

  3. 在布局文件中添加RichText组件：将RichText组件添加到你的布局文件中，或通过代码动态添加到界面上。

  4. 设置RichText内容：将之前创建的RichText对象设置为RichText组件的内容。

这样，你就可以在HarmonyOS的应用中展示富文本内容了。

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

回到顶部