RichEditor sets content to adapt to width automatically

#harmonyos #richeditor #layoutmanager #arkts

Read the original article：RichEditor sets content to adapt to width automatically

Requirement Description

Unlike the Text component, the RichEditor component cannot automatically adjust its own width according to the content.

Background Knowledge

RichEditor: A component that supports mixed text and image layout and interactive text editing. It is typically used to respond to user input operations involving mixed content of text and images, such as a comment area that allows both text and images.
onDidChange: A callback triggered after the component performs add or delete operations. If no actual addition or deletion occurs in the text, this callback is not triggered.
onReady: A callback triggered after the RichEditor component has been fully initialized.

Implementation Steps

Dynamically calculate the width of the RichEditor component based on the text width, border width, and padding width.

Code Snippet

import { display } from '@kit.ArkUI';

@Entry
@Component
export struct RichEditorWidthChange {
  controller: RichEditorController = new RichEditorController();
  @State textStr: string = 'text';
  @State richEditorWidth: number | string = '100%';
  @State richEditorPadding: number = 12
  @State richEditorBorder: number = 1
  private displayWidth: number = this.getUIContext().px2vp(display.getDefaultDisplaySync().width);

  // Avoid resize mode
  aboutToAppear(): void {
    this.getUIContext().setKeyboardAvoidMode(1)
    console.info('displayWidth: ', this.displayWidth)
  }

  getLayoutWidth() {
    let layoutManager: LayoutManager = this.controller.getLayoutManager();
    let lineCount = layoutManager.getLineCount()
    let lineWidthSum = 0;
    for (let i = 0; i < lineCount && layoutManager.getLineMetrics(i); i++) {
      lineWidthSum = lineWidthSum + layoutManager.getLineMetrics(i).width;
    }
    lineWidthSum = this.getUIContext().px2vp(lineWidthSum) + this.richEditorPadding * 2 + this.richEditorBorder * 2
    // If total text width exceeds current window width,
    this.richEditorWidth = lineWidthSum >= this.displayWidth ? '100%' : lineWidthSum;
  }

  build() {
    Scroll() {
      Column() {
        RichEditor({ controller: this.controller })

          .padding(this.richEditorPadding)
          .borderRadius(20)
          .borderColor(Color.White)
          .borderWidth(this.richEditorBorder)
          .backgroundColor('#ff565656')
          .width(this.richEditorWidth)
          .height('auto')
          .onReady(() => {
            this.controller.addTextSpan(this.textStr);
          })
          .onDidChange(() => {
            // Wait 10ms to ensure that after addTextSpan adds text,
            // layoutManager.getLineCount() can correctly detect the current line count
            setTimeout(() => {
              this.getLayoutWidth()
            }, 10)
          })
          .animation({
            duration: 200
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('90%')
      .height('100%')
      .margin(10)
    }
  }
}

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
This example must be compiled and run using DevEco Studio 5.1.1 Release or above.