function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ross GoldbergRoss Goldberg 

lightning:inputrichtext is inserting extra line breaks

When we use the lightning:inputRichText component the outputted HTML is generating extra space between lines than what the user sees when editing their text in the component.  This behavior can be demonstrated using the example in Salesforce's own documentation here:

https://developer.salesforce.com/docs/component-library/bundle/lightning:inputRichText/example

Does anyone know how to prevent this behavior?  If not, is this a bug in the comonent?  If so, how are such bugs reported?

Example showing incorrect behavior
 
Best Answer chosen by Ross Goldberg
Alain CabonAlain Cabon
Hi,

slds-rich-text-area__content should be used instead of slds-text-longform​
  
<aura:component>
    <aura:attribute name="myVal" type="String" />
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:card iconName="standard:account" title="Test" >
        <div class="slds-p-horizontal--small">         
            <lightning:inputRichText value="{!v.myVal}" placeholder="Type something interesting" />
            <h1 class="slds-m-top_large slds-text-heading_medium">Output</h1>
            <div aura:id="output" class="slds-box editor slds-rich-text-area__content">
                <lightning:formattedRichText value="{!v.myVal}" />
            </div>
        </div>
    </lightning:card>
</aura:component>

User-added image

 

All Answers

Alain CabonAlain Cabon
Hi,

slds-rich-text-area__content should be used instead of slds-text-longform​
  
<aura:component>
    <aura:attribute name="myVal" type="String" />
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:card iconName="standard:account" title="Test" >
        <div class="slds-p-horizontal--small">         
            <lightning:inputRichText value="{!v.myVal}" placeholder="Type something interesting" />
            <h1 class="slds-m-top_large slds-text-heading_medium">Output</h1>
            <div aura:id="output" class="slds-box editor slds-rich-text-area__content">
                <lightning:formattedRichText value="{!v.myVal}" />
            </div>
        </div>
    </lightning:card>
</aura:component>

User-added image

 
This was selected as the best answer
deepak singh 344deepak singh 344
Hi Alain Cabon , how to avoid the line spacing if I am storing the input rich text value in a different attribute ? Below is my code

AURA comp :

    <aura:handler name="change" value="{!v.emailBodyDisplay}" action="{!c.handleValueChange}"/>
    <lightning:inputRichText value="{!v.emailBodyDisplay}" placeholder="Type something interesting"/>

controller :
handleValueChange: function(component, event, helper)
     {
         var updatedBody = component.get('v.emailBodyDisplay');
         component.set('v.emailBodyChanged', encodeURIComponent(updatedBody));
    }