RichTextEditor

Overview

Text editor toolbar that is designed to manage the Text Layout Framework ("TLF") for RichEditableText based controls. All supported functions are routed through an EditManager so all functions can be undone/redone.

Manage a RichEditableText control by setting a reference to it in the RichTextEditor component's "target" property. This flexibility allows the user to float the editor in a panel, or attach it directly to a component such as a TextArea.

Creating the RichTextEditor Component

The RichTextEditor extends SkinnableComponent. It can be added as a child to any container that implements IVisualElementContainer.

Removing Buttons

To reduce the number of buttons and functionality, remove the undesired buttons from the skin. All skin parts are optional.

Keyboard Shortcuts

Keyboard shortcuts are supported out of the box.

Shortcuts:

• Undo - ctrl + z
• Redo - ctrl + y
• Italic - ctrl + i
• Underline - ctrl + u
• Bold - ctrl + b
• Text Align Left - ctrl + l
• Text Align Center - ctrl + e
• Text Align Right - ctrl + r
• Text Align Justify - ctrl + j
• Numerical List - ctrl + shift + 7
• Disc List - ctrl + shift + 8

Focus

Focus can be tricky. Some fields in the RichTextEditor, such as TextInputs will take focus away from the editable text by necessity. The editor will restore focus to the target editable text on changes.

Text Selection Color

The target's "selectionHighlighting" property is set so selection highlighting is preserved even when focus on the target editable text is lost. This way, selection will persist when the user interacts with the RichTextEditor.

It is important to note that even if "selectionHighlighting" is set to ALWAYS, by default the color of the selected text will change when the target editable text loses focus. For some people, this is the expected behavior. For others, it is jarring.

To prevent the selection color from changing on focus out, change the "inactiveTextSelectionColor" and the "unfocusedTextSelectionColor" styles to the same value as the "focusedTextSelectionColor" style.

<s:TextArea inactiveTextSelectionColor="{getStyle('focusedTextSelectionColor')}"
	    unfocusedTextSelectionColor="{getStyle('focusedTextSelectionColor')}"/>

The example code above has a TextArea with the same color for "focusedTextSelectionColor", "inactiveTextSelectionColor", and "unfocusedTextSelectionColor" styles.

Accessibility

The RichTextEditor supports keyboard interaction.

TLF

TLF is somewhat buggy so expect some unexpected behavior. For example: for lists, bullet points are left aligned regardless of the text alignment.

Themes & Skinning

A single skin is provided for the Spark theme.

Notes

It is not advised to attach multiple instances of this editor to a single TextFlow. It will work, but it will not update correctly.

Example

See the RichTextEditor demo application for example code.

Back To Top