A lightning:inputRichText component creates a rich text editor based on the Quill JS library, enabling you to add, edit, format, and delete rich text. You can create rich text editors with different toolbar configurations.

Pasting rich content into the editor is supported if the feature is available in the toolbar. For example, you can paste bold text if the bold button is available in the toolbar.

This component implements styling from rich text editor in the Lightning Design System.

This example creates a rich text editor and sets its content during initialization.

<aura:component> <aura:attribute name="myVal" type="String" /> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <lightning:inputRichText value="{!v.myVal}" /> </aura:component>

Initialize the rich text content in the client-side controller.

({ init: function(cmp) { cmp.set('v.myVal', 'Hello!'); } })

Note that the value attribute doesn't support concatenation in markup. To create dynamic content, set the dynamic value in the controller.

The required="true" attribute marks the text editor as requiring user input. To display an asterisk to indicate input is required, also set labelVisible="true". A default label displays after the asterisk. See the Accessibility section for more information about labels.

The component doesn't validate for required input. See Input Validation for more information.

Customizing the Toolbar

The toolbar provides menus and buttons that are ordered within the following categories.

1. FORMAT_FONT: Font family and size menus. The font menu provides the following font selection: Arial, Courier, Garamond, Salesforce Sans, Tahoma, Times New Roman, and Verdana. The font selection defaults to Salesforce Sans with a size of 12px. Supported font sizes are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, and 72. When you copy and paste text in the editor, the font is preserved only if the font is available in the font menu.
2. FORMAT_TEXT: Bold, Italic, Underline, and Strikethrough buttons.
3. FORMAT_BODY: Bulleted List, Numbered List, Indent, and Outdent buttons.
4. ALIGN_TEXT: Left Align Text, Center Align Text, and Right Align Text buttons.
5. INSERT_CONTENT: Image button. The Image button displays if you include the lightning:insertImageButton component in lightning:inputRichText.
6. REMOVE_FORMATTING: Remove formatting button, which stands alone at the end of the toolbar.

You can disable buttons by category using the disabledCategories attribute. This example shows how to disable the FORMAT_TEXT category for Bold, Italic, Underline, and Strikethrough buttons.

<aura:component> <lightning:inputRichText value="{!v.myVal}" disabledCategories="FORMAT_TEXT"> </lightning:inputRichText> </aura:component>

Enabling and Disabling Formats in the Editor

You can customize the editor using the formats attribute, which lists individual formats that the editor supports within the categories.

By default, lightning:inputRichText enables some formats with a corresponding toolbar button. Formats that don't provide a toolbar button support only pasted content. For example, link is enabled by default without a corresponding toolbar button. This means links you paste into the editor are preserved but you can't create or edit the links in the editor. Additionally, the table and header formats are enabled by default but support pasted content only, and do not provide toolbar buttons. You can't create or edit a table or a header in the rich text editor.

The formats attribute must include the complete list of formats to enable. If you pass in a subset of the formats, all other formats are removed from the toolbar, and pasted content using the missing formats are not rendered correctly in the text editor.

This example shows how to add the color format to the editor, which adds a text color button.

<aura:component> <lightning:inputRichText value="{!v.myVal}" formats="['font', 'size', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'clean', 'table', 'header', 'color']"> </lightning:inputRichText> </aura:component>

This example shows how to remove the strike format from the editor, which removes the Strikethrough button from the toolbar.

<aura:component> <lightning:inputRichText value="{!v.myVal}" formats="['font', 'size', 'bold', 'italic', 'underline', 'list', 'indent', 'align', 'clean', 'table', 'header']"> </lightning:inputRichText> </aura:component>

Applying Formats Programmatically

You can set some formats programmatically by using the setFormat() method.

This example shows a button that applies a list of formats in the editor. The formats attribute lists all formats allowed in the editor, adding background and color formats. This enables setFormat() to apply those non-default formats.

<aura:component> <lightning:inputRichText aura:id="editor" placeholder="Type something interesting" formats="['font', 'size', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'link', 'image', 'clean', 'table', 'header', 'color', 'background']"/> <lightning:button label="Set format" onclick="{!c.handleClick}"/> </aura:component>

Pass in the formats to setFormat().

This example passes formats to create right-aligned, Garamond font text that is bold, italic, and colored red, on a black background.

({ handleClick: function(cmp) { var appliedFormats = { align: 'right', font: 'garamond', size: 20, bold: true, italic: true, color: 'mediumvioletred', background: '#000000' }; var editor = cmp.find("editor"); editor.setFormat(appliedFormats); } })

To retrieve the formats, use getFormat(). The rich text editor removes any font values that are not supported.

Supported formats are as follows.

Inserting Images

Add a toolbar button for uploading and inserting images by using lightning:insertImageButton as a child component. The component inserts the image button in the INSERT_CONTENT category area.

Clicking the image button opens a file picker you can use to locate and select an image on your device. The image is uploaded to the org and inserted inline in the text editor.

Supported image types are png, jpg, jpeg, and gif. The maximum image size is 1MB.

Resizing of images is not supported. Copy and pasting of images is not supported, although it might work on some combinations of browsers and operating systems. By default, guest users can't upload images to Experience Builder sites.

By default, the image is visible only in the text editor as you insert it, and when you display the editor output, for example by using the lightning:formattedRichText component. However, the image can be accessed by any org user who has access to the image URL.

When you use lightning:inputRichText in Salesforce, pasting an image from an HTTP source results in the display of a broken image icon. Mixed content is blocked in Salesforce to improve security. We recommend uploading the image as a static resource first before using it in the component. Alternatively, enable the image toolbar button so your users can upload the image to the org.

Important: For images that shouldn't be accessible to all org users, you must restrict access to the images.

Restricting Access to Uploaded Images

Uploaded image files are accessible to all org users by default.

Restrict access to the image by using the shareWithEntityId attribute to specify the ID of a record, org, group, or user that should have access to the image. The image that's inserted into the text editor is shared with the entity that corresponds to that ID.

If the ID corresponds to:

• the org: all users in the org have access to the image.
• a group: only users in that group can see the image.
• a record: anyone with access to that record can see the image.
• a user: only that user can see the image.

Note that when you use the shareWithEntityId attribute, the image is more restricted, but it's also viewable in the Files tab. When you share an image with a record ID, the image is available in the Notes and Attachments related list of the record page. Only users with permissions to the record can see the image in any of these locations.

This example shows the text editor used on a record page, where the image is shared with the record ID of the record that's displayed.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> <lightning:inputRichText label="Make a note" shareWithEntityId="{!v.recordId}"> <lightning:insertImageButton /> </lightning:inputRichText> </aura:component>

Input Validation

lightning:inputRichText doesn't provide built-in validation but you can wire up your own validation logic. Set the valid attribute to false to change the border color of the rich text editor to red. Set the required and labelVisible attributes to true to display the asterisk near the label.

This example checks whether the rich text content is empty or undefined.

<aura:component> <aura:attribute name="myVal" type="String" /> <aura:attribute name="errorMessage" type="String" default="You haven't composed anything yet."/> <aura:attribute name="validity" type="Boolean" default="true"/> <lightning:inputRichText value="{!v.myVal}" placeholder="Type something interesting" labelVisible="true" required="true" messageWhenBadInput="{!v.errorMessage}" valid="{!v.validity}"/> <lightning:button name="validate" label="Validate" onclick="{!c.validate}"/> </aura:component>

The validate function toggles the validity of the rich text editor, and displays the error message when it's invalid.

({ validate: function(cmp) { if(!cmp.get("v.myVal")){ cmp.set("v.validity", false); } else{ cmp.set("v.validity", true); } } })

Supported HTML Tags

The rich text editor provides a WYSIWYG interface only. You can't edit HTML tags using the editor, but you can set the HTML tags via the value attribute. When you copy content from a web page or another source and paste it into the editor, unsupported tags are removed. Only formatting that corresponds to an enabled toolbar button or menu is preserved. For example, if you disable the FORMAT_TEXT category, the Bold, Italic, Underline, and Strikethrough buttons are not available. Furthermore, pasting bold, italic, underlined, or strikethrough text in the editor are not supported when you disable the FORMAT_TEXT category. Text that was enclosed in unsupported tags is preserved as plain text. However, tables, images, and links that you copy in a browser window can be pasted into the editor and set via the value attribute, even though there are no corresponding toolbar buttons or menus for them.

The component sanitizes HTML tags passed to the value attribute to prevent XSS vulnerabilities. Only HTML tags that correspond to features available on the toolbar are supported. If you set unsupported tags via a client-side controller, those tags are removed and the text content is preserved. The supported HTML tags are: a, col, colgroup, em, h1, h2, h3, h4, h5, h6, img, li, ol, p, q, s, strike, strong, table, tbody, td, tfoot, th, thead, tr, u, ul.

This component converts certain unsupported tags into supported tags with similar functions.

Other unsupported tags and attributes are removed, and only their text content is displayed. Let's say you copy some text that's rendered bold with color formatting, and its HTML markup looks like this.

The sky is <span style="color:blue;font-weight:bold">blue</span>. <div style="color:#0000FF;font-weight:bold">This is some text in a div element.</div>

If your rich text editor specifies support for the bold format but not the color format, the editor preserves the bold formatting by converting it to a strong tag. However, the color formatting in the pasted text is removed.

Accessibility

Set a text label with label to describe the rich text field. For example, specify "Comments" if you expect a user to enter comments. Display the label visually on the field by setting labelVisible to true. If you don't set labelVisible, the label is available only to screen readers as assistive text.

To display the default label "Compose text" instead, set labelVisible to true without setting a label value.

If you don't specify either label or labelVisible, the default label "Compose text" is used as assistive text and it's not visible.

Use the label and labelVisible attributes instead of the deprecated attributes ariaLabel, ariaLabelledby, and ariaDescribedby.

We recommend that you provide a label even when you provide placeholder text for the rich text field. Without field labels, users can lose context when the placeholder text disappears as they type in the field.

When focus first shifts to the rich text editor, initial focus is on the first item in the toolbar, which is the font selector by default.

Use Tab and Shift+Tab to navigate between the selectors for font and size. Tab from the size selector to the formatting buttons. Focus goes to the first button, which is the bold button by default. If you previously selected a different button, focus initially returns to that button instead of the first button.

When focus is on a formatting button, use arrow keys to navigate through the buttons. When you select a button, the cursor goes to the editor panel where you can type your formatted text. Press Shift+Tab to return to the toolbar.

Character Limits

Salesforce uses lightning:inputRichText in many features, such as in a custom rich text field or Chatter feed. Each feature that uses the rich text editor enforces a character limit. Refer to the documentation in Salesforce Help for a feature's limits and allocations.

Here are several documentation that discuss the character limit for features that use lightning:inputRichText.

• Rich Text Area Field Considerations
• General Chatter Allocations
• Note and Attachment Fields

Character limits include HTML tags, even though they're not visible in the editor. By default, Quill appends an additional 7 characters `<p></p>` to the text. The actual length of text you enter always includes this additional 7 characters. Rich text formatting also adds to the character count. For example, bold formatting includes the `` tag around your text and adds 7 more characters to your actual length of text.

Usage Considerations

The editor automatically indents nested bulleted lists. If you insert extra indents, they are removed on save.

Although the toolbar buttons for creating tables and links are not available, creating them programmatically or copying from a browser window and pasting these elements preserves the formatting in the editor.

Output from the editor can display differently outside of the Salesforce Lightning Experience. If the content is being viewed outside of Lightning contexts (such as in an e-mail), there will be visual inconsistencies.

When using setFormat(), navigating to a previous line removes the user's format settings for empty newlines. For example, the user can set the styling to bold and type three lines, leaving the second line empty. If the user navigates away from the second line, then navigates back, it no longer has bold styling.

The value attribute for this input type only supports string values. To clear the editor by setting the value attribute, use "" to specify an empty string because null and undefined aren't supported.

When using lightning:inputRichText in a standalone app, extend force:slds to display the editor styling correctly.

You can use custom labels that display translated values. For more information, see the Lightning Aura Components Developer Guide.