1

I have a Lightning component that displays record's content as rich text. The content contains HTML code and I need to make it work with jQuery on click handler and some plugins.

The content comes from Apex Controller and renders correctly, jQuery is also added to the component. However, it looks like ui:outputRichText component is rendering the data asynchronously, the HTML of the ui:outputRichText is empty after component.set().

Can someone help me and tell how it should be done correctly?

Component:

<div class="record-content" aura:id="content">
  <ui:outputRichText class="slds-text-longform" value="{!v.content}" />
</div>

Controller:

var action = component.get('c.getContent');
action.setParams({ recordId: recordId });
action.setCallback(this, function (response) {
  var state = response.getState();
  if (state === 'SUCCESS') {
    var record = response.getReturnValue();

    component.set('v.content', record.Content__c)

    $('body').on('click', '.js-button', function() {
     $('.js-content').toggle();
    });

    // component.find('content').getElement().innerHTML is empty
    // $('content').html() is empty

  }
});
$A.enqueueAction(action);

Content that renders in v.content

<div class="box">
  <button class="box__btn js-button">Click to display the content</button>
  <div class="box__content js-content">Hey there</div>
</div>
  • Is this a typo? class="record-content aura:id="content" ? Notice you are missing a quote at the end of the class attribute definition. – Caspar Harmer Oct 22 '18 at 21:23
0

You can't access the raw html of this component - you can only access it's value attribute. This is because of restrictions imposed by LockerService.

Also, if you are only using jQuery for the above, you should just consider using regular javascript to do this as loading the third party script causes a delay and also introduces the possibility of failure if changes are made by either jQuery or Salesforce

So first, give your component and aura:id, eg aura:id="mytextarea"

Then, access it's value like so:

component.find('mytextarea').get("v.value");

EDIT... It appears you want to render dynamic html. Note that this is a security risk, but if you REALLY want to do this, you should use an aura:unescapedHtml component. You definitely won't get this to work with the richtext component.

In this case, simply replace your <ui:outputRichText/> component with the <aura:unescapedHtml/> component.

EDIT 2 You can do this. I've made a wee demo that shows how you can render arbritrary content and also have a listener on it.

The key point is - store the event listener as an attribute.

Component:

<aura:component >
  <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
  <aura:attribute name="eventListener" type="Object" default="" />
  <div id="content"/>
</aura:component>

Controller:

onRender : function(component, event, helper) {
    var content = document.getElementById('content');
    content.innerHTML = helper.innerContent;
    var bttn = document.getElementsByClassName('box__btn')[0];
    var eventListener = bttn.addEventListener('click',function(){
        document.getElementsByClassName('box__content')[0].style.display = 'block';
    });
    component.set("v.eventListener",eventListener);
},

Helper:

innerContent : '<div class="box"><button class="box__btn js-button">Click to display the content</button><div class="box__content js-content" style="display:none;">Hey there</div></div>'

Note the helper inner content is just there for my demo, of course you'll be retrieving it from the server.

It should work (does for me)

  • Casper, thank you for the answer! It looks like the <aura:unescapedHtml/> component also doesn't provide access to the raw HTML. So it's not possible to add click handlers and etc. The only option that worked is to insert the content directly into DOM using regular Javascript/jQuery but I believe it will fail the security audit. – Andrey Metelsky Oct 23 '18 at 10:53

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.