Rich text Editor Functionality
The Rich Text Editor provides an intuitive interface for creating, editing, and formatting text content. It allows users to perform common text formatting operations such as bold, italic, underlining, strike through, uppercase, lowercase, subscript, superscript, as well as insert images, tables, and symbols.Also having the new features.
The editor allows users to dynamically insert fields, related lists, and variables into templates. It supports hierarchical field references, interactive fields, additional objects, and global variables to create flexible and dynamic content.
Key Features
- Text Formatting: Supports common text formatting options such as bold, italic, underline, strikethrough and more, allowing users to easily style their content.
- Remove Formatting: Clears any applied formatting, returning the text to its original state for clean editing.
- Lists: Allows users to create numbered lists and bullet points for better content organization.
- Indent: Allows users to apply indentations to selected text or paragraphs.
- Font Options: Provides a range of font styles, sizes, colors, and alignment options to enhance text appearance.
- Headings & Format Blocks: Supports standard text formatting options such as applying Headings, adding Quotes, inserting Code blocks, and converting text into Paragraphs for better readability and structure.
- Undo/Redo: Offers the ability to undo or redo recent changes, providing users with flexibility to correct mistakes or revert changes.
- Cut / Paste / Select All :
- Cut: Removes the selected content from its current location and stores it in the clipboard, allowing it to be pasted elsewhere.
- Paste: Inserts the content from the clipboard into the desired location.
- Select All: Highlights all content within the current context, enabling users to perform actions such as cut, copy, or delete on the entire content at once.
- Tables: The editor allows users to create and manage tables with flexible options to organize and format content efficiently. The following functionalities are provided:
- Color :
- Background Color: Set the fill color for selected cells.
- Text Color: Change the text color within the cells.
- Border Color: Customize the color of selected cell borders.
- Background Color: Set the fill color for selected cells.
- Vertical Alignment: Adjust content alignment within cells to Top, Middle, Bottom, or Normal.
- Split Cells: Divide a merged cell either vertically or horizontally into individual cells.
- Text Alignment: Align text within cells to Left, Center, Right and justify.
- Merge Cells: Combine multiple selected cells into a single cell for better data presentation.
- Add Columns: Insert columns to the after or before of the selected column.
- Add Rows : Insert rows above or below the selected row
- Delete :
- Delete Row : Remove a selected row from table.
- Delete Column : Remove a selected column from table.
- Delete Table: Remove the entire table.
- Empty Cell: Clear the content of the selected cell without deleting the cell itself.
- Delete Row : Remove a selected row from table.
- Color :
This table functionality allows users to structure data clearly, apply consistent formatting, and customize the appearance of tables to match their content needs.
- Insert Images: Enables users to insert images up to 5 MB in size, supporting common image formats such as PNG, JPEG, TIFF, SVG, and ICON for enriched content. Users can also search and select images that have already been uploaded in the Salesforce org.
- Insert Horizontal Line : Allows users to add a horizontal line in the editor to visually separate or organize content for better readability.
- Insert link: The Insert Link feature in content editors that allows users to create hyperlinks. A hyperlink (or link) is a clickable element, typically text or an image, that directs users to another location, such as a different web page, a specific section of the same page, an email address.
Primary Purpose: To connect content and enable seamless navigation, providing additional context, resources, or pathways for the user.
When you click on the Insert Link a dialog box typically appears requesting the following details:
- URL (Uniform Resource Locator): It defines the destination address of the link. Examples: https://www.example.com/page
- Text to Display : This is the visible, clickable text that the user sees on the page. It should be descriptive and inform the user about where the link will take them.Example: Instead of “Click here,” use “Read our full Privacy Policy.”
- Class Name: This is an advanced field primarily for developers and designers. It allows you to assign a CSS class to the link, which can then be styled with custom colors, fonts, or effects (like underline animations).Example: A class like btn btn-primary could style the link to look like a button.
- Unlink: This button is used to remove an existing hyperlink. If you place your cursor on a linked piece of text and open the link dialog, this button will be active, allowing you to strip the link while keeping the text.
- Update: After filling in the URL, Text, and other details, you click the Update (or “OK”/”Insert”) button to create the link and place it into your content.
After a link is inserted and you hover over it within the editor, a small toolbar or context menu often appears with these options:
- Open : This opens the linked destination in a new browser tab. It’s a quick way to test the link and verify it goes to the correct place without leaving the editor.
- Edit : This re-opens the link dialog box, allowing you to modify any of the link’s properties—such as changing the URL, updating the display text, or adjusting the class name.
- Unlink : This is a quick-access shortcut to remove the hyperlink, functioning identically to the “Unlink” button in the main dialog.
- Color : This provides advanced styling control over the link’s appearance directly from the editor, without needing to write CSS code. It typically includes:
- Text Color: Changes the color of the link text itself.
- Text Color: Changes the color of the link text itself.
- Background Color: Adds a colored highlight or background behind the link text to make it stand out.
Insert File : The Insert File feature allows users to embed and manage various file types within content editors, enabling direct access to documents.
When you click on the Insert Link a dialog box typically appears requesting the following details:
- URL (Uniform Resource Locator): It defines the destination address of the link. Examples: https://www.example.com/page
- Alternative Text : This is the visible, clickable text that the user sees on the page. It should be descriptive and inform the user about where the link will take them.
- Insert : After filling in the URL, Text, and other details, you click the Insert button to create the link and place it into your content.
- Insert Symbols/Special Characters: Users can insert various symbols (e.g., copyright, trademarks, arrows and special characters etc.) to improve text clarity and visual appeal.
- Insert Video: Users can embed videos into the content from sources like YouTube, Vimeo, or local video files. They can set video size, alignment, and playback options to ensure proper display and interaction within the content.
When you click on the Insert Video a dialog box typically appears requesting the following details:
- URL (Uniform Resource Locator) in link tab: It defines the destination address of the link.
- Embed Code in code tab : Here user can Enter the Embed Code to enter the video in content.
- Insert :After filling in the URL/ Embed Code, you click the Insert button to insert the video and place it into your content.
- Source Code View/Change Mode: Allows users to view and edit the raw HTML source of the content, offering advanced customization and control over the structure.
- Preview :The Preview feature allows users to view a live, temporary representation of their document or design exactly as it will appear to the end-user, without saving or publishing the current changes.
Primary Purpose: To provide a risk-free, accurate simulation of the final output, enabling users to verify the overall layout, formatting, functionality, and content integrity before committing to saving or making the work public.
- Subscript : A Subscript is a character set slightly below the normal line of type. It is commonly smaller than the rest of the text. Example: H₂O.
- Superscript: A Superscript is a character set slightly above the normal line of type. It is also typically rendered in a smaller font size.
Primary Purpose: To represent exponents, ordinals, and footnotes, or for trademark symbols. Example: 2³ = 8
- Target Object: This is the primary object on which the template or document is being generated. Users can access and insert fields from the target object, with supporting up to a 5-level hierarchy for dynamic content integration.
- Interactive Fields: These are input fields of the target object. Users can embed dynamic fields such as Checkbox, Currency, Date, Email, Picklist, Text, and more. These fields automatically update based on user input or contextual data, enabling advanced content personalization.
Additionally, merge expressions can be used to dynamically control and customize the displayed values. They allow users to define values dynamically at runtime, making the content interactive, flexible, and adaptable. - Global Variables : Contains commonly used global variables such as Date/Time values (e.g., current time, date),User fields (e.g., current logged-in user details) and Organization fields (e.g., company information).
Useful for adding universal data points without referencing specific objects. - Additional Objects: Users can include additional objects besides the target object. Fields from these objects can be used within the template to provide greater flexibility. Users can access and insert fields not only from the target object but also from these additional objects, with support for up to a 5-level hierarchy for dynamic content integration.
- Related List: The Related List displays objects associated with the Target Object (e.g., Opportunity’s related records), showing their fields in a hierarchical structure of up to 5 levels, while allowing users to apply filters and expand fields from related objects for enhanced data visualization and flexibility.
- Paste Functionality: When you copy and paste any content into the application, a popup appears providing the following options for how to paste the content:
- Keep → Pastes the copied content exactly as it is, including all original formatting.
- Insert as Text → Pastes the content along with its HTML body, formatting, and context.
- Insert Only Text → Pastes only the plain text without any HTML tags or formatting.
- Cancel → Closes the popup without pasting the content.
- Keep → Pastes the copied content exactly as it is, including all original formatting.
