HarmonyOS Next: How To Use RichEditor

#huawei #harmony #harmonyos

Read the original article：HarmonyOS Next: How To Use RichEditor

Introduction

This article demonstrates how to build interactive rich text editors in HarmonyOS ArkTS with three practical examples. Users will learn how to:

Show a toast message when copying text

Change typing style dynamically via a button

Insert images into the text using a button

Why Rich Text Editors?

Rich text editors are essential for any app that involves user-generated content or document editing. While HarmonyOS provides powerful UI components, integrating features like copy feedback, style customization, and image insertion requires some setup. This article provides minimal, clear code samples to help developers implement these features efficiently.

Core Components and Shared Setup

Before diving into each example, let’s review the common building blocks they all share:

RichEditorController
This controller manages the text editor’s content and behavior. It allows you to programmatically add text, change styles, or insert images.

RichEditorOptions
This configuration object links the controller to the editor component, enabling options and callbacks.

RichEditor Component
The main editable text area. It supports event callbacks like onReady (triggered when the editor loads) and onCopy (triggered on copy events). You can set dimensions and customize interaction handlers here.

controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };

RichEditor(this.options)
  .onReady(() => {
     this.controller.addTextSpan()
  })
  .width(300)
  .height(100)

Example 1: Copying Text with Toast Notification

When users copy text inside a RichEditor, the onCopy callback allows developers to respond to this action in a meaningful way. It's not limited to simply showing a toast message, it can also be used to guide the user, simplify the next step, or create a more interactive experience within the app.

For example, after the user copies some text, a button like “Use” or “Share” can be displayed on the screen, giving the user a clear option for what to do next.

When the user copies text, the onCopy callback triggers a toast message saying “text copied.”

  RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan('Copy this text to see the onCopy callback in action.', {
            style: {
              fontColor: Color.White,
              fontSize: 15
            }
          })
        })
        .onCopy(() => {
          promptAction.openToast({
            message: "text copied",
            duration: 1000,
            showMode: promptAction.ToastShowMode.DEFAULT,
            bottom:80
          })
        })
        .width(250)
        .height(100)

Example 2: Changing Typing Style via Button

This feature enhances the UI by allowing dynamic changes to typing style, making text input more visually engaging and polished. A button toggles the style, so new text automatically follows the preset formatting.

The editor starts with a default text span. When the button labeled “Change The Text Style” is clicked, it applies a new style: pink italic text with underline and bold font weight. After clicking, any new text typed adopts this style.


      RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan('Click to activate styled typing.', {
            style: {
              fontColor: Color.White,
              fontSize: 15
            }
          })
        })
        .width('100%')
        .height(60)
      Button('Change The Text Style')
        .height(30)
        .fontSize(13)
        .onClick(() => {
          this.controller.setTypingStyle({
            fontWeight: 'Bold',
            fontColor: Color.Pink,
            fontSize: 15,
            fontStyle: FontStyle.Italic,
            decoration: {
              type: TextDecorationType.Underline,
              color: Color.Gray
            }
          })
        })

Example 3: Adding Images with a Button

Rich text is not just text, images often enhance meaning. This example lets users insert an image span at the end of the text via a button click.

Clicking “Add Image to Text” inserts a predefined image icon with a specified size.

The image appears inline with the text content.

RichEditor(this.options)
        .onReady(() => {
          this.controller.addTextSpan('Click the button to add an image here.', {
            style: {
              fontColor: Color.White,
              fontSize: 15
            }
          })
        })
        .width(200)
        .height(100)
      Button('Add Image to Text')
        .height(30)
        .fontSize(13)
        .onClick(() => {
          this.controller.addImageSpan($r("app.media.startIcon"), {
            imageStyle: {
              size: ["57px", "57px"]
            }
          })
        })

Conclusion

This example shows how easy it is to create interactive rich text editors in HarmonyOS NEXT. By responding to user interactions through the editor’s features, the interface becomes more dynamic and user-friendly, enhancing the overall experience.