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.

Technical Details

The latest technical documentation about the Text Component can be found on GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

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.

NOTE
Only options enabled by UI configurations of the RTE are available by in the Text Component.

Edit Dialog

The edit dialog offers the standard rich text formatting tools a user would expect to compose text.

Text Component's edit dialog

Bold

Bold icon

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

Italic icon

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

Underline icon

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

Subscript icon

Used to format selected text or text entered after the cursor as subscript.

Superscript

Superscript icon

Used to format selected text or text entered after the cursor as superscript.

Paste as Text

Paste as text icon

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 as text example

Paste from Word

Paste from Word icon

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.

Paste from Word example

Hyperlink icon

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.

Hyperlink example

  • 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.