Rich Text Area Field in LWC

 richTextInputLWC.HTML:

<template>

<lightning-card variant="Narrow" title="Rich Text Area Field in LWC" icon-name="standard:account">

<div class="slds-p-horizontal_small">

<lightning-input-rich-text value={fieldValue}

label={fieldLabel}

label-visible

required={required}

formats={allowedFormats}

valid={validity}

class="visibleLines"

onchange={handleChange}

share-with-entity-id={recordId}

message-when-bad-input={errorMessage}>

</lightning-input-rich-text>

</div>

</lightning-card>

<br/><br/>

<lightning-card variant="Narrow" title="Rich Text Area Field Output" icon-name="standard:account">

<div class="slds-p-horizontal_small">

<lightning-formatted-rich-text value={fieldValue}></lightning-formatted-rich-text>

</div>

</lightning-card>

</template>

richTextInputLWC.JS:

import { LightningElement, api } from 'lwc';

export default class RichTextInputLWC extends LightningElement {

fieldValue = " ";

fieldLabel;

required;

fieldLength = 32000;

visibleLines = 3;

@api recordId;

validity;

errorMessage;

allowedFormats = [

'font',

'size',

'bold',

'italic',

'underline',

'strike',

'list',

'indent',

'align',

'link',

'image',

'clean',

'table',

'header',

'color',

'background',

'code',

'code-block',

'script',

'blockquote',

'direction',

];

connectedCallback() {

this.validity = true;

document.documentElement.style.setProperty('--rta-visiblelines', (this.visibleLines * 2) + 'em');

}

handleChange(event) {

if ((event.target.value).length > this.fieldLength) {

this.validity = false;

this.errorMessage = "You have exceeded the max length";

}

else {

this.validity = true;

this.fieldValue = event.target.value;

}

}

}

richTextInputLWC.js-meta.xml:

<?xml version="1.0"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>57.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

 

<template>
    <lightning-card variant="Narrow" title="Rich Text Area Field in LWC" icon-name="standard:account">
        <div class="slds-p-horizontal_small">
            <lightning-input-rich-text value={fieldValue} 
                                       label={fieldLabel} 
                                       label-visible
                                       required={required} 
                                       formats={allowedFormats} 
                                       valid={validity}
                                       class="visibleLines"
                                       onchange={handleChange}             
                                       share-with-entity-id={recordId}
                                       message-when-bad-input={errorMessage}>
            </lightning-input-rich-text>
        </div>
    </lightning-card>
    <br/><br/>
    <lightning-card variant="Narrow" title="Rich Text Area Field Output" icon-name="standard:account">
        <div class="slds-p-horizontal_small">
            <lightning-formatted-rich-text value={fieldValue}></lightning-formatted-rich-text>
        </div>
    </lightning-card>        

            
</template>

<template>
    <lightning-card variant="Narrow" title="Rich Text Area Field in LWC" icon-name="standard:account">
        <div class="slds-p-horizontal_small">
            <lightning-input-rich-text value={fieldValue} 
                                       label={fieldLabel} 
                                       label-visible
                                       required={required} 
                                       formats={allowedFormats} 
                                       valid={validity}
                                       class="visibleLines"
                                       onchange={handleChange}             
                                       share-with-entity-id={recordId}
                                       message-when-bad-input={errorMessage}>
            </lightning-input-rich-text>
        </div>
    </lightning-card>
    <br/><br/>
    <lightning-card variant="Narrow" title="Rich Text Area Field Output" icon-name="standard:account">
        <div class="slds-p-horizontal_small">
            <lightning-formatted-rich-text value={fieldValue}></lightning-formatted-rich-text>
        </div>
    </lightning-card>        

            
</template>