Rich Text Area Field in LWC

Hello friends, today we will discuss the Rich Text Area Field in LWC. The rich text area field is a powerful field type that allows users to format text, embed images, create links, and more, right within your LWC forms.

By incorporating Rich Text Area fields into your LWCs, you’re elevating the user experience and enabling more expressive data input. Whether it’s capturing detailed descriptions, creating content-rich knowledge articles, or any scenario that requires user-generated content, this feature adds a dash of creativity to your LWC development.

Also, check this: Check User Permissions for Current User in LWC

Key Highlights :

1. Creative Expression: Users can format text, add links, images, and more, enhancing the quality and expressiveness of their input.
2. Enhanced Data Presentation: Rich Text Area fields allow for engaging content in records and reports.
3. User-Centric Design: Empower users to communicate and present information effectively.

Code :

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>

Output :

Reference :

1. Lightning Input Rich Text