0

The documentation shows the following example to input HTML with styling:

var rte = "<h1 style=\"color:blue;\">This is a blue heading</h1>";
cmp.set("v.richtext", rte);

This works, but if you try to give <h1 style="color:blue;">This is a blue heading</h1> from an Apex controller, the styling is disregarded and the color is no longer blue but the default.

Can anyone reproduce the error or am I missing something? I cannot add any style attributes to my html tags.

Component:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="EmailController" >

    <aura:handler name="init" action="{! c.doInit}" value="{! this }" />

    <aura:attribute name="html" type="String" />
    <aura:attribute name="inputRichTextFormats" type="String" default="[
        'font', 'size', 'bold', 'italic', 'underline',
        'strike', 'list', 'indent', 'align',
        'clean', 'table', 'header']"/>
    
    <lightning:inputRichText value="{!v.html}" formats="{! v.inputRichTextFormats }" />

</aura:component>   

JS Controller:

({
    doInit : function(component, event, helper) {
        helper.callApexMethod(component, 'getHTML', false, function(response) {
            let state = response.getState();
            if (state === "SUCCESS") {
                var htmlresponse = response.getReturnValue();
                component.set('v.html', htmlresponse);
            } else {
                console.log("Failed with state: " + state);
            }
        });
    }
})

Helper:

({
    callApexMethod: function(component, method, params, callback) {
        let action = component.get("c." + method);
        if (params) action.setParams(params);
        if (callback) action.setCallback(this, callback);
        $A.enqueueAction(action);
    }
})

Apex Controller:

public class EmailController{
    @AuraEnabled
    public static String getHTML(){
        return '<h1 style="color:blue;">This is a blue heading</h1>';
    }
}

2 Answers 2

0

Ok, it seems like using span server-side works, instead of h1 or p. Still weird though.

0

Your code works for me and did not result in any issue. Please be reminded, lightning:inputRichText Aura component does not have color attribute (or) feature so you cannot set text colors.

1

Salesforce Ideas: https://trailblazer.salesforce.com/ideaView?id=08730000000BrJzAAK

I found a similar example https://developer.salesforce.com/forums/?id=906F0000000D8mIIAS

Let me know if it helps!

2
  • yes there is color, have a look under Enabling and Disabling Formats in the Editor here Jun 22, 2021 at 10:02
  • It looks like you have to represent the text within h1 tag as span. I found the below change working after doing front-end component inspect. public class EmailController{ @AuraEnabled public static String getHTML(){ return '<h1><span style=color:blue;>This is a blue heading</span></h1>'; } } Let me know if it helps! Jun 23, 2021 at 8:22

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.