- Loading...
Page History
Author: Jindrich Dinga
1. Introduction
This document is the user experience specification for the JavaFX HTML Text Editor control.
2. Overview
HTML Text Editor (aka WYSIWYG Editor) is a UI control that provides users with an editing interface which allows them to see the content how it will be displayed in a web browser.
...
- Advanced Styling - allows users to display text as Superscript or Subscript, and Clear Styles.
- Inserting Rich Content - allows users to Insert File, Insert Video, Insert Picture, Insert Table, Insert Special Character, andInsert Form Controls.
- Additional Features - includes features such as Find and Find and Replace. In addition to these, it also includes Print,Maximize/Fullscreen, Show HTML Source, and Insert Anchor.
3. Interaction Design
This section describes actions that are mentioned in Basic Features set in more details. Please note that each action is represented in the HTML Text Editor's Toolbar as an icon. Hovering over each icon will show the associated tooltip.
...
figure 1 - Wireframe of HTML Text Editor Control (please note that the final design will be provided by the Visual Design Group)
Actions and their grouping
Please note that all icons listed below are just placeholders. Final icons will be provided by the Visual Design Group.
| 1st group includes: Cut, Copy, Paste | Undo, Redo | ||
| Cut |   | This action removes selected area and place it to the clipboard so users can paste it to another place. It has two states:
Tooltip: Cut |
| Copy |   | This action makes a copy of selected area and place it to the clipboard so user can paste it to another place. It has two states:
Tooltip: Copy |
| Paste |   | This action pastes whatever is in the clipboard, right after the I-beam cursor. It has two states:
Tooltip: Paste |
| Undo |   | Everytime this action is invoked, it reverts changes one step back. It has two states:
Tooltip: Undo |
| Redo |   | Everytime this action is invoked, it reverts changes one step forward. It has two states:
Tooltip: Redo |
| 2nd group includes: Styles, Font Family, Font Size | Bold, Italic, Underline, Strikethrough | Align Left, Center, Align Right, Justify| Bulleted List, Numbered List | Outdent, Indent | Text Color, Background Color | Clear Styles | ||
| Styles |   | This action allows users to choose style of the text. When clicked it opens a list with the following choices: Paragraph, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6. Tooltip: Styles Nice to have: It would be nice, if we could show an accurate preview of styles in the drop-down. |
| Font Family |   | This action allows users to change the font family. Ideally, we should be able to read fonts from the user's system, however, if this is not possible from some reason we should display the following list of "browser safe fonts": Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida Console, Palatino, Tahoma, Times New Roman, Trebuchet MS, and Verdana. Tooltip: Font Family Nice to have: It would be nice if we could show an accurate preview of font families in this component. |
| Font Size |   | This action allows users to change size of the font. Predefined sizes are as follows: 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, and 36pt. Tooltip: Font Size Mapping:
Nice to have: It would be nice if we could show an accurate preview of font sizes in this component. |
| Bold |   | This action allows users to change/type the text to/in bold. Users can select the text and change it to bold or invoke this action and start typing - the new text will be displayed in bold. Tooltip: Bold |
| Italic |   | This action allows users to change/type the text to/in italic. Users can select the text and change it to italic or invoke this action and start typing - the new text will be displayed in italic. Tooltip: Italic |
| Underline |   | This action allows users to change/type underlined text. Users can select the text and underline it or invoke this action and start typing - the new text will be underlined. Tooltip: Underline |
| Strikethrough |   | This action allows users to change/type strikethrough text. Users can select the text and make it strikethrough or invoke this action and start typing. Tooltip: Strikethrough |
Align Left |   | When clicked, the text, in which the I-beam cursor is placed, is aligned to left. Tooltip: Align Left |
| Center |   | When clicked, the text, in which the I-beam cursor is placed, is centered. Tooltip: Align Center |
| Align Right |   | When clicked, the text, in which the I-beam cursor is placed, is aligned to right. Tooltip: Align Right |
| Justify |   | When clicked, the text, in which the I-beam cursor is placed, is justified. Tooltip: Justify |
| Bulleted List |   | This action creates a bulleted list. Tooltip: Bulleted List |
| Numbered List |   | This action creates a numbered list. Tooltip: Numbered List |
| Outdent |   | This action allows users to outdent the text. It has two states:
Tooltip: Outdent |
| Indent |   | This action allows users to indent the text. Tooltip: Indent |
| Text Color |   | This action allows users to change color of the text. Users can select the text and change its color or select a color and start typing using the new color. Once clicked, it triggers Color Palette Chooser. Tooltip: Select text color |
| Background Color |   | This action allows users to change background color of the text. Users can select the text and change its background color or select a color and start typing using the new background color. Once clicked, it triggers Color Palette Chooser. Tooltip: Select background color |
| Clear Styles |   | This action clear styles from the selected area. It has two states:
Tooltip: Clear Styles Please note that this feature will be part of next version of JavaFX HTML Text Editor control. |
| 3rd group includes: Horizontal Rule | Insert Hyperlink, Remove Hyperlink | ||
| Horizontal Rule |   | This action inserts a horizontal line upon click. Its width depends on place where it is inserted. Tooltip: Insert Horizontal Ruler |
| Insert/Edit Hyperlink |   | This action allows users to insert/edit a hyperlink to/in the document. Once clicked, it triggers this dialog. Tooltip: Insert/Edit Link Please note that this feature will be part of next version of JavaFX HTML Text Editor control. |
| Remove Hyperlink |   | When the I-beam cursor is next to a text that links somewhere or such text is selected, it allows users to remove the link without removing the text. It has two states:
Tooltip: Unlink Please note that this feature will be part of next version of JavaFX HTML Text Editor control. |
Dialogs
Color Palette Chooser
This pop-up window opens upon click on Text Color or Background Color drop downs. It allows users to pick a certain color that will be used for text or background.
figure 2 - Wireframe of Color Palette Chooser (please note that the final design will be provided by the Visual Design Group)
After users click on the desired color, the pop-up window is closed. The pop-up window can also be closed by pressing Esc button or by clicking outside the window.
Insert/Edit Hyperlink
This is a pop-up window that opens upon click on Insert/Edit Hyperlink action.
figure 3 - Wireframe of Insert/edit hyperlink (please note that the final design will be provided by the Visual Design Group)
Users are allowed to insert a hyperlink in two ways:
...
To edit a hyperlink, users can select the hyperlink or place the I-beam cursor next to it and click Hyperlink icon. Upon click, Insert/Edit Hyperlink dialog pops-up with pre-filled Title and/or Hyperlink text fields.
Keyboard Support
For keyboard support see Toolbar UE spec and TextArea UE spec.
Overview
Content Tools