RichEditor sets content to adapt to width

#harmonyos #richeditorcomponent #dynamicwidthadjustment #layoutcalculation

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

Problem Description

Unlike the Text component, the RichEditor cannot automatically adjust its width based on the content. As a result, the component may extend beyond the width occupied by the text, as shown in the image below:

Background Knowledge

RichEditor: A component that supports mixed text and image layout and interactive text editing, typically used to respond to user input operations for mixed text and image content, such as in comment sections where users can input text and images.
onDidChange: A callback triggered after the component performs add or delete operations. This callback is not triggered if no actual text addition or deletion occurs.
onready: A callback triggered after the rich text component has completed its initialization.

Troubleshooting Process

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

Solution

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

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

  // Avoid adjusting the size 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
    // The total text width exceeds the current window width.
    this.richEditorWidth = lineWidthSum >= this.displayWidth ? '100%' : lineWidthSum;
  }

  build() {
    Scroll() {
      Column() {
        RichEditor({ controller: this.controller })
          .padding(this.richEditorPadding)
          .borderColor(Color.Red)
          .borderWidth(this.richEditorBorder)
          .width(this.richEditorWidth)
          .height('auto')
          .onReady(() => {
            this.controller.addTextSpan(this.textStr);
          })
          .onDidChange(() => {
            // Wait for 10ms to ensure that after addTextSpan adds the text, layoutManager.getLineCount() can correctly detect the current number of lines.
            setTimeout(() => {
              this.getLayoutWidth()
            }, 10)
          })
          .animation({
            duration: 200
          })
      }
      .margin({ top: 100, left: 8, right: 8 })
    }
  }
}

Verification Result

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
This example requires DevEco Studio 5.1.1 Release and above for compilation and execution.

DEV Community