Rich Text Editor for Salesforce Flow

Creating a custom reusable lighting component with lightning:inputRichText that can use in the flow builder.

1. Creating Custom Lighting Component.

Component File

<aura:component implements="lightning:availableForFlowScreens">

<aura:attribute name="value" type="String" />

<aura:attribute name="label" type="String" />

<aura:attribute name="required" type="String" />

<aura:handler name="init" value="{!this}" action="{!c.validate}"/>

<aura:attribute name="errorMessage" type="String" default="Required field"/>

<aura:attribute name="validity" type="Boolean" default="true"/>

<p><lightning:formattedText value="{!v.label}" /></p>

<lightning:inputRichText value="{!v.value}" messageWhenBadInput="{!v.errorMessage}" valid="{!v.validity}" placeholder=""/>

</aura:component>

Controller File.JS

({

validate : function(cmp, event, helper) {

if(cmp.get("v.required") == "true"){

if(cmp.get("v.value") != undefined && cmp.get("v.value").length >= 2){

cmp.set("v.validity", true);

}

else{

cmp.set("v.validity", false);

}

}

}

})

Design File

<design:component>

<design:attribute name="value" Label="Value"/>

<design:attribute name="required" Label="Required"/>

<design:attribute name="label" Label="Label"/>

</design:component>

Now Configure in Flow

For getting the value of this input rich text field use {!apiname.value}.

Example : {!enterNoteCarrierConnection.value} as per the above image

Real time how it looks like shown in the below image.

Hope this is useful for using rich text input in Salesforce lighting flow builder and the above shown is the simple way to implement and reusable purpose.