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.
HTML Text Editor control serves for three purposes::
- creating/editing a web page (e.g. Wiki),
- commenting an article/blog post, and
- sending/displaying formatted text in an email or chat client.
In these days, there are a lot of various WYSIWYG Editors available on the Internet. Based on our research, we have identified a set of basic features and their actions that the HTML Text Editor control should provide. These are as follows:
- Fundamental Features - this includes basic actions such as Cut, Copy, and Paste. In addition to these, users are also allowed to Undo and Redo changes.
- Styling - allows users to define Font Family, Font Size, Style (Paragraph, Heading 1, 2, ...), and Character Style (Bold, Italic, Underline, Strikethrough). It also allows users to define Text Alignment (Left, Center, Right, Justify), Indent and Outdent,Bulleted and Numbered Lists, and insert a Horizontal Rule.
- Colors - allows users to specify Text Color and Background Color.
- Linking - allows users to easily Insert Hyperlink and Remove Hyperlink (Unlink).
Next generation of HTML Text Editor control should provide users with more advanced features/actions such as:
- 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.
The following picture shows a wireframe of HTML Text Editor Control.
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:
- select a text and click Hyperlink icon
- window pops-up
- Text is pre-filled with the selected text
- enter the hyperlink
- select the target
- press OK
- text becomes underlined and points to the desired location
- click Hyperlink icon
- window pops-up
- enter the text
- enter the hyperlink
- select the target
- press OK
- text is inserted into the page (if no title has been entered, the hyperlink is inserted into the page)
Target offers the following choices:
- _blank - opens the linked document in a new window or tab
- _parent - opens the linked document in the parent frameset
- _self - opens the linked document in the same frame as it was clicked
- _top - opens the linked document in the full body of the window
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.