How to limit the maximum number of lines in RichEditor

Read the original article：How to limit the maximum number of lines in RichEditor

How to limit the maximum number of lines in RichEditor

Problem Description

How to limit the maximum number of input lines in the RichEditor rich text editor? The text box initially has a single line, and the number of lines increases as text is entered. When the number of lines reaches the specified limit, the height of the text box remains unchanged, and the entered text is displayed in a scrollable manner.

Background Knowledge

• RichEditor is 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 text and images, such as in comment sections where users can enter text and images.
• The general attribute constraintSize is used to set the constraint size. During component layout, it restricts the size range.
• maxLines is used to set the maximum number of lines that can be displayed in the rich text. When maxLines is set, any content exceeding this limit will be displayed in a scrollable manner. When both the component height and the maximum number of lines are set, the component height takes precedence.

Solution

• In API version 18 and above, RichEditor provides the maxLines interface to set the maximum number of lines. For example code, refer to the section on setting the maximum number of lines in RichEditor. In versions prior to API 18, RichEditor does not have a direct interface to set the maximum number of lines. However, a similar effect to maxLines can be achieved by setting the maxHeight of RichEditor. When the content exceeds maxHeight, the height of the input area
• RichEditor no longer changes, and any overflow content is displayed in a scrollable manner. To avoid abnormal height when there is no input, you can also set minHeight. The specific steps are as follows:

1. Set the line height of RichEditor using lineHeight.
2. Set the padding of RichEditor. The default value is 8vp.
3. Set the maxHeight and minHeight of RichEditor. The calculation method is: padding (top and bottom) + number of lines * line height.

@Entry
@Component
struct Index {
  // Define variables
  private paddingVertical: string = '8vp' // Set top and bottom padding (assuming they are the same)
  private marginVertical: string = '16vp' // Set left and right margins (assuming they are the same)
  private fontSize: string = '16fp' // Set font size
  private minLine: number = 1 // Set minimum number of lines
  private maxLine: number = 3 // Set maximum number of rows
  private lineHeight: string = '18fp' // Set font height
  controller: RichEditorStyledStringController = new RichEditorStyledStringController()

  build() {
    Column() {
      Row() {
        RichEditor({ controller: this.controller })
          .padding({ top: this.paddingVertical, bottom: this.paddingVertical })
          .margin({ left: this.marginVertical, right: this.marginVertical })
          .onReady(() => {
            this.controller.setTypingStyle({
              fontSize: this.fontSize,
              lineHeight: this.lineHeight
            });
          })
          // Calculate the minimum and maximum height: minHeight/maxHeight = top and bottom padding + number of lines (minLine/maxLine) * line height (lineHeight)
          .constraintSize({
            minHeight: `${2 * parseFloat(this.paddingVertical) + this.minLine * parseFloat(this.lineHeight)}vp`,
            maxHeight: `${2 * parseFloat(this.paddingVertical) + this.maxLine * parseFloat(this.lineHeight)}vp`
          })
      }
      .width('70%')
      .backgroundColor(Color.Gray)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Verification Result

This example supports API Version 19 Release and later versions.
This example supports HarmonyOS 5.1.1 Release SDK and later versions.
This example requires DevEco Studio 5.1.1 Release or later for building and running.

Written by Dogan Evci