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
Pasan EeriyagamaPasan Eeriyagama 

How to make lightning:inputRichText Readonly?

How do you make lightning:inputRichText readonly, there is a disabled attribute. It seems not working yet. Is there a workaround to show it as a readonly field on page (by wrapping with a div tags may be).

markup: 
<lightning:inputRichText value="{!v.richTextfield}" disabled="true" disabledCategories="FORMAT_FONT,FORMAT_TEXT,FORMAT_BODY,ALIGN_TEXT,REMOVE_FORMATTING"/>

 
Rahul KumarRahul Kumar (Salesforce Developers) 
Hi, PasanEeriyagama,

May I suggest you Please refer the below link for reference. I hope it will be helpful.

Please mark it as best answer if the information is informative.so that question is removed from an unanswered question and appear as a proper solution.

Thanks
Rahul Kumar
Akshay_DhimanAkshay_Dhiman
Hi PasanEeriyagama,

Since Lightning Tags are in beta version , might be one reason that its not working . Alternatively, I have done with some css .
Below is a code for the same. Hope it helps you.

Aura Component Code : 
<aura:component controller="searchAccountController">
   <aura:attribute name="abc" type="string" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <div id="texteditor">
    <div class="slds-form-element">
         <label class="slds-form-element__label" for="textareaSample2">Rich Text Editor</label>
         <div class="slds-form-element__control" id="editor">
             <lightning:inputRichText value="{!v.abc}" />
         </div>
     </div>
 </div>
</aura:component>
Aura Controller Code : 
({
doInit: function (c, e, h) {
      c.set("v.abc",'This is the testing of rich text editor for word wrap content. Hope it helps you !!');
}
})
Aura App Code : 
<aura:application extends="force:slds">
   <c:richtexteditor/>
</aura:application>
Style Sheet Code : 
.THIS #editor {
pointer-events: none;
}

Screenshot :
User-added image

Regards,
Akshay
Pasan EeriyagamaPasan Eeriyagama
It's because disabled property is not working as expected. It's not resulting a readonly view for the user yet. Hope it'll be fixed in one of next releases.
MG7MG7
@Pasan Eeriyagama did you find a solution to this issue. I am trying to make the lightning:inputRichText readonly and it does not seem to work.
Pasan EeriyagamaPasan Eeriyagama
Hi @Malini Gali7, It wasn't at that time. I would like you to suggest using 2 divs, hide/show for edit/view modes as the last resort.
MG7MG7
Thanks Pasan