Text Component text-component
The Core Component Text Component is a rich text editing and composing component that features in-place editing.
Usage usage
The Text Component offers a robust rich text editor that allows for easy text editing in a simplified, in-line editor as well as a full screen format.
The edit dialog features in-line editing with limited options with full functionality available in the full-screen edit dialog. Using the design dialog, text formatting options such as headings, special characters, and paragraph styles can be configured for the template for the content author.
Version and Compatibility version-and-compatibility
The current version of the Text Component is v2, which was introduced with release 2.0.0 of the Core Components in January 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
For more information about Core Component versions and releases, see the document Core Components Versions.
Sample Component Output sample-component-output
To experience the Text Component as well as see examples of its configuration options as well as HTML and JSON output, visit the .
Technical Details technical-details
The latest technical documentation about the Text Component .
Further details about developing Core Components can be found in the Core Components developer documentation.
The Text Component and the Rich Text Editor the-text-component-and-the-rich-text-editor
The Core Components Text Component leverages the AEM Rich Text Editor (RTE). The RTE provides content authors with a wide range of functionality for editing their text content. The RTE is very flexible in its configuration and offers a number of options. Further details about how the RTE can be configured can be found in the articles Configure the Rich Text Editor and Configure the Rich Text Editor plug-ins.
The remainder of this article demonstrates the standard configuration of the Core Components Text Component with the out-of-the-box RTE configuration.
Edit Dialog edit-dialog
The edit dialog offers the standard rich text formatting tools a user would expect to compose text.
Bold
Used to apply bold formatting to selected text or boldly format text entered after the cursor.
Ctrl+B can be used as a keyboard shortcut.
Italic
Used to apply italicized formatting to selected text or italicize text entered after the cursor.
Ctrl+I can be used as a keyboard shortcut.
Underline
Used to apply underlined formatting to selected text or underline text entered after the cursor.
Ctrl+U can be used as a keyboard shortcut.
Subscript
Used to format selected text or text entered after the cursor as subscript.
Superscript
Used to format selected text or text entered after the cursor as superscript.
Paste as Text
Pastes any copied text as plain text without any formatting.
When selecting this option a window opens where the text can be pasted as plain text with no formatting as a preview before it is inserted into the text. Accept by tapping or clicking the check mark, cancel by tapping or clicking the x.
Paste from Word
When selecting this option a window opens where the text can be pasted maintaining its formatting as a preview before it is inserted into the text. Accept by tapping or clicking the check mark, cancel by tapping or clicking the x.
Hyperlink
Use this option to convert the selected text into a hyperlink or modify an already defined link. This option is only active when text is already selected and opens a window with additional options for setting the link.
-
Enter the path
- Use the Open Selection Dialog to choose a path in AEM
- If the link is not within AEM, enter the absolute URL
- Non-absolute paths are interpreted as relative to AEM
-
Enter alternative descriptive text for the link
-
Select link behavior
- Target
- Same Tab
- New Tab
- Parent Frame
- Top Frame
Tap or click the check mark to apply the link or the x to cancel.
Unlink
Use this option to remove a link already applied to the selected text. This option is only active when a link is already selected.
Find
Use this option to search the text for occurrence of a specified text string. Selecting this option opens a window for specifying the search options.
Enter the text for which you want to search and tap or click Find to begin the search. Tap or click the x to cancel.
If you wish to do an exact match according to the case, select the option Match Case before starting the search.
If a match is found, it is highlighted and the search dialog is dimmed. Tap or click the Find button again in the dimmed dialog to search for the next occurrence.
If no additional occurrences are found, a message will be displayed and the search will restart from the beginning of the text.
Replace
Use this option to search the text for occurrences of a specified text string and replace the matches with another string. Selecting this option opens a window for specifying the search and replace options.
Enter the text for which you want to search as well as the text with which it should be replaced.
- Tap or click Find to begin the search. Click or tap the x to cancel.
- If you wish to do an exact match according to the case, select the option Match Case before starting the search.
- Select Replace all to replace all occurrences of the text at once.
If a match is found, it is highlighted and the search dialog is dimmed. Click the Find button again in the dimmed dialog to search for the next occurrence or select the Replace button to replace the highlighted, matched text. Note that the Replace button is only active once a match is made.
The find and replace dialog becomes transparent when find is clicked and becomes opaque when replace is clicked. This allows the author to review the text that the author will replace.
Align Text Left
Used to align the text to the left margin.
Center Text
Used to center the text.
Align Text Right
Used to align the text to the right margin.
Bullet
Used to format the selected text as a bulleted list or begin the insertion of a bulleted list after the cursor.
To end a bulleted list, tap or click the Bullet button again or enter two carriage returns.
Numbered
Used to format the selected text as a numbered list or begin the insertion of a numbered list after the cursor.
To end a numbered list, tap or click the Numbered button again or enter two carriage returns.
Outdent
Used to decrease the indentation level of the selected text or text entered after the cursor.
Only active if the selected text or position of the cursor is already indented.
Indent
Used to increase the indentation level of the selected text or text entered after the cursor.
Table
Used to insert a table into the text. Selecting this option opens a window for specifying the details of the table.