# RichEditor如何限制最大行数

#### 问题现象

RichEditor富文本编辑如何限制最大输入行数？文本框初始为单行，文本框行数随输入文字而增加，当行数到达指定限制后，文本框高度不变，输入的文本滚动显示。

#### 效果预览

#### 背景知识

*   RichEditor是支持图文混排和文本交互式编辑的组件，通常用于响应用户对图文混合内容的输入操作，例如可以输入图文的评论区。
*   通用属性constraintSize用于设置约束尺寸，组件布局时，进行尺寸范围限制。
*   maxLines用于设置富文本可显示的最大行数，当设置maxLines时，超出内容可滚动显示。同时设置组件高度和最大行数，组件高度优先生效。

#### 解决方案

*   在API18及以上版本，RichEditor提供了设置最大行数的maxLines接口，示例代码可参考设置最大行数和最大字符数。
*   在API18版本之前，RichEditor没有直接设置最大行数的接口，不过可以通过设置RichEditor的maxHeight实现类似maxLines的效果。超过maxHeight，RichEditor的输入区域高度不再变化，且支持超出内容滚动显示。同时设置minHeight，避免无输入时RichEditor高度异常。具体步骤如下：
    
    1.  设置RichEditor的行高lineHeight。
    2.  设置RichEditor的内边距padding，默认值为8vp。
    3.  设置RichEditor的maxHeight和minHeight，计算方式为上下padding+行数line\*行高lineHeight。
    
    ```
    @Entry
    @Component
    struct RichEditorMaxLines {
      // 定义变量
      private editorPadding: string = '8vp'; // 设置上下左右padding
      private fontSize: string = '16fp'; // 设置字体大小
      private minLine: number = 1; // 设置最小行数
      private maxLine: number = 3; // 设置最大行数
      private lineHeight: string = '18fp'; // 设置单行高度
      controller: RichEditorStyledStringController = new RichEditorStyledStringController();
    
      build() {
        Column() {
          Row() {
            RichEditor({ controller: this.controller })
              .padding(this.editorPadding)
              .onReady(() => {
                this.controller.setTypingStyle({
                  fontSize: this.fontSize,
                  lineHeight: this.lineHeight
                });
              })
              // 计算最小和最大高度：minHeight/maxHeight=上下padding+行数minLine/maxLine*行高lineHeight
              .constraintSize({
                minHeight: `${2 * parseFloat(this.editorPadding) + this.minLine * parseFloat(this.lineHeight)}vp`,
                maxHeight: `${2 * parseFloat(this.editorPadding) + this.maxLine * parseFloat(this.lineHeight)}vp`
              });
          }.borderRadius('12vp')
          .width('90%')
          .backgroundColor('#F1F3F5');
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center);
      }
    }
    ```
    

#### 常见FAQ

Q：RichEditor是否支持单行输入？

A：当前RichEditor不支持单行输入，若需要实现单行输入的能力，请使用组件TextInput。

Q：RichEditor组件，通过addTextSpan方法添加文本，文本行高最大能缩放到多少倍？

A：详细可查看RichEditorTextStyle的lineHeight字段的说明，设置值不大于0时，不限制文本行高，自适应字体大小。