5

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

enter image description here

10

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

  • Great thanks, dumb of me to miss that. The only defense I can offer for doig so is that i the SF component reference for ui:outputRichText developer.salesforce.com/docs/atlas.en-us.lightning.meta/… the example they give is just as I had it, a div with a class. In retrospect that is really inconsistent with the other components so I should have spotted but it threw me. – Doug Nov 20 '16 at 23:10
  • That was an example of what the tag compiled to. Maybe that example should have been put at the end of the article. – Robert Sussland Nov 20 '16 at 23:20
  • @Doug - Yea, that got me at first too, you have to really read and you will see the following: which results in the following HTML - The docs do not even give an example of the "correct" usage - If you click "next" the ui:outputText give a proper example of it and is how the doc for the rich text should be. I submitted doc feedback in case anyone is listening – Eric Nov 20 '16 at 23:20
  • Yeah I see, my bad going straight to the code example. Opening 5 or so other pages on ui comps the rest all do follow the patter of example of component then what tag compiles to so this page is a bit inconsistent (still should have been obvious to spot though!) – Doug Nov 20 '16 at 23:38
1

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

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.