Lightning component to render a rich text field unescaped

Question

Trying to do something fairly simple I think and query a FeedItem record then display its body in a lightning component. Issue I have is that I cant work out how to display the body unescaped.

In the component as before I am even trying to fling in an escape = false attribute but isnt doing the trick.

(If this was visualforce Id use the escaped= false attribute on apex:output text but that doesnt seem to be availbe here).

Apex Controller Method

@AuraEnabled
public static FeedItem getChatterPost(Id parId) {
    return [SELECT Id, Title, Body, Type, ParentId, Parent.Name 
            FROM FeedItem
            WHERE ParentId = :parId
            LIMIT 1];
}

Component

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global"  controller="PortalCaseAlertsController">
<ltng:require styles="/resource/SLDS203/assets/styles/salesforce-lightning-design-system-ltng.css" /> 
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="chatterPost" type="FeedItem" />
<aura:attribute name="chatterPostList" type="FeedItem[]" />

<article class="slds-card slds-card">
    <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="slds-media__body slds-truncate">
                <h2>
                    <a href="javascript:void(0);" class="slds-text-link--reset">
                        <span class="slds-text-heading--small">Announcements</span>
                    </a>
                </h2>
            </div>
        </header>
    </div>
    <div class="slds-card__body slds-text-align--center">
        <div class="uiOutputRichText"  escape="false" linkify="true" >
            {!v.chatterPost.Body}    
        </div>
    </div>
    <div class="slds-card__footer"> ... </div>
</article>

Output

Answer 1

Did you try

<ui:outputRichText aura:id="outputRT" value="{!v.chatterPost.Body}" />

Which would result in the proper output

I believe they way you are doing it, is the final output of the ui component but with the escaped version of the value.

You could also do

<div class="uiOutputRichText" linkify="true" >
     <aura:unescapedHtml value="{!v.chatterPost.Body}"/>
</div>

To output pre-formatted HTML, use aura:unescapedHTML. For example, this is useful if you want to display HTML that is generated on the server and add it to the DOM. You must escape any HTML if necessary or your app might be exposed to security vulnerabilities.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_html.htm

Answer 2

You can use lightning:formattedRichText value="{!v.messageAttributeName}"

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

Answer 3

This is just a div with an expression set to its nodeValue:

<div class="uiOutputRichText"  escape="false" linkify="true" >
   {!v.chatterPost.Body}   <!-- not how you include a child component --> 
</div>

The only thing that will happen here is that v.chatterPost.Body will be set as the textContent of the div.

Although you are declaring the div to have a class equal to "uiOutputRichText", the process of compiling component markup to html isn't hooked into class names, but into declaring the right xml namespace and tag:

<ui:outputRichText value="{!v.chatterPost.Body}"/> <!-- this works -->

(The escape="false" attribute is part of VisualForce, not Aura)

For more info, see https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_outputRichText.htm?search_text=rich%20text