The Core Component Text Component is a rich text editing and composing component that features in-place editing.
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.
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.
AEM as a Cloud Service
For more information about Core Component versions and releases, see the document Core Components Versions .
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 Component Library .
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.
Only options enabled by UI configurations of the RTE are available by in the Text Component.
The edit dialog offers the standard rich text formatting tools a user would expect to compose text.
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.
Used to apply italicized formatting to selected text or italicize text entered after the cursor.
Ctrl+I can be used as a keyboard shortcut.
Used to apply underlined formatting to selected text or underline text entered after the cursor.
Ctrl+U can be used as a keyboard shortcut.
Used to format selected text or text entered after the cursor as subscript.
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.
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.
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.
When using the replace functionality, the replace string to be replaced should be entered at the same time as find string. However you can still click find to search for the string before replacing it. If the replace string is entered after clicking find, the search is reset to the beginning of the text.
Align Text Left
Used to align the text to the left margin.
Used to center the text.
Align Text Right
Used to align the text to the right margin.
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.
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.
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.
Used to increase the indentation level of the selected text or text entered after the cursor.
Used to insert a table into the text. Selecting this option opens a window for specifying the details of the table.
- Columns - The number of columns of the table (required)
- Rows - The number of rows of the table (required)
- Width - The width of the table
- Height - The height of the table
- Cell padding - The space around the cell content
- Cell spacing - The space between cells
- Border - The weight of the border lines of the table
- If for the header of the table:
- The first row should be used
- The first column should be used
- The first row and first column should be used
- Or no header should be used.
- Caption - The caption of the table
Used to check the spelling of the text content. Possible misspellings are underlined with broken, red lines.
Further details about spell checking and customizing spell check dictionaries can be found in the document Configure the Rich Text Editor Plug-Ins .
Used to insert special characters into the text. Selecting this option opens a window where the available characters are displayed.
Tap or click the desired character to insert it into the text after the cursor. Multiple characters can be inserted. Tap or click the x to close the selection window.
Used to view and modify the HTML source of the text.
Tap or click the Source Edit icon to change the content of the text from the formatted view to view the raw HTML. In this mode, all other formatting options are disabled. Tap or click the Source Edit icon again to return to the formatted view.
As always the case with access to raw HTML, care must be exercised when using the Source Edit option!
HTML entered via Source Edit is scanned for XSS risks and any scripts that are inserted are removed and will not appear on the resulting page. However malformed HTML entered in Source Edit can break the template for the page resulting in unexpected formatting or rendering the resulting page unusable.
Because HTML entered via Source Edit is scanned for XSS risks and any scripts and automatically removes those found, the actual content persisted may vary from what was entered in Source Edit . For this reason, in order to save changes made using Source Edit , you must first exit Source Edit to view the text in the normal editor before saving.
Used to apply paragraph formatting to the selected text or to text inserted after the cursor. Selecting this options opens a dropdown from which the paragraph format is selected.
The text component can be edited in-line as well, but due to space restraints, not all formatting options are available in-line. To see all options, switch to full-screen mode.
Setting and ID
This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
The design dialog allows the template author to define which text formatting options are available to the content authors.
The Plugins tab is used to enable and disable various text formatting options available to the content authors.
The following features can be activated or deactivated for the component.
- Paste plain text
- Past from word
- Find and replace
- Spell checker
- Inserted image modification options
- HTML source editing
The following formatting options can be activated or deactivated for the component.
- Lists (bullet, number, indent, outdent)
- Alignment (left, right, centered)
- Bold, italic, underline
- Linking (and unlinking)
Paragraph styles can be activated or deactivated for the component. When activated, the allowed formats can be defined.
- Tap or click the Add button to insert a new style.
- Enter the code of the style and a description that will be displayed in the edit dialog.
- To remove a style tap or click the Delete button.
- To rearrange the order of the formats tap or click and drag the handles.
The option to insert special characters can be activated or deactivated for the component. When activated, the allowed characters can be defined.
- Tap or click the Add button to insert a new character.
- Enter the HTML code of the character and a description that will be displayed in the edit dialog.
- To remove a character tap or click the Delete button.
- To rearrange the order of the characters tap or click and drag the handles.
The Text Component supports the AEM style system .