动态调整Lightning-Input-Rich-Text的文本区域

Question

用户在文本区域内创建多个换行符后，我尝试增加文本区域框的高度。我在寻找一种方法来定位文本区域高度的值以增加每个换行符的值时遇到问题。我将不胜感激任何帮助。谢谢。

import { LightningElement } from 'lwc';

export default class TextBoxSizing extends LightningElement {
    handleTextBoxChange(event){
        let eventArr = [];
        let lineBreaks = 0;
    
        eventArr.push(...event.target.value); 
        eventArr.forEach(e =>{
          if(e == '/'){
          lineBreaks++;
          if(lineBreaks > 5) {

          let lirt = this.template.querySelector('lightning-input-rich-text').height; //undefined 
          console.log(lirt); 
 
          } 
         }
       });
    }
}

Answer 1

您见过样式挂钩吗？阅读文章，阅读 textarea 的文档，检查是否添加TextBoxSizing.css 与类似的东西

:host {
    --sds-c-textarea-sizing-min-height: 10em;
}

可以正常工作。

如果确实如此，下一步就是向 CSS 添加一个 JavaScript 控制的变量。我不久前也有类似的问题：https://salesforce.stackexchange.com/q/341324/799

像这样？

<template>
    <lightning-card>
        <lightning-input-rich-text value={text}></lightning-input-rich-text>

        <lightning-input type="number" label="Wheee :)" value={lines} onchange={handleLines} min="1" max="99"
            variant="label-inline">
        </lightning-input>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class StackTextarea extends LightningElement {

    text = '<b>Hello!</b>';
    lines = 1;

    connectedCallback() {
        this.resize();
    }

    handleLines(event) {
        this.lines = event.target.value;
        this.resize();
    }

    resize() {
        document.documentElement.style.setProperty('--rtf-size', (this.lines * 2) + 'em');
    }
}

:host{
    --sds-c-textarea-sizing-min-height: var(--rtf-size);
}

Answer 2

如果有人需要它，我选择了以下

100% 富文本区域

import { LightningElement, api, track } from 'lwc';

export default class inputRichTextFSC_LWC extends LightningElement {
    
    //Handle updates to Rich Text field with enhanced features
    handleTextChange(event) {

    }

}

:host {
    --slds-c-textarea-sizing-min-height: 100%;
    --slds-c-textarea-sizing-max-height: 100%;
}

<template>
  <div>
    <lightning-input-rich-text onchange={handleTextChange}>
    </lightning-input-rich-text>
  </div>
</template>