- Loading...
Page History
...
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
...
| 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. |
...
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.
...
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:
...
Overview
Content Tools