Details
-
Story
-
Resolution: Fixed
-
Neutral
-
None
-
None
-
-
Empty show more show less
-
Basel 85
-
8
Description
The stories of the Article Editor so far cover the creation of raw text blocks only. This story asks for (limited) rich-text editing features to be available in every text block.
When editing a text block in the article story, a toolbar with text decoration options will appear. Out of the box there are usually a large set of default rich editing options. Most of them are never used. For the article editor we want to reduce those options to keep the UI simple + easy. We also don't want the user to have to deal with HTML code when editing text.
PLEASE NOTE: Although the mockups appear in a new visual design please ignore the styling. Only focus on mechanics & functionality!
Reduce default toolbar options
1. Reduce the default options in the toolbar to a minimal choice: bold, italic, header style 1, header style 2, add link.
2. Align the toolbar centered above the text block.
Apply bold/italic to text
1. Select text in a text block. Apply text decorations bold and italic by selecting the icons in the toolbar. Bold/italic can be selected separate or combined.
2. If the cursor is at the beginning of a text block and bold or italic is already selected, text will appear in bold or italic when user starts typing.
Remove bold/italic from text
1. Select text in a text block where bold or italic has been applied.
2. Remove text decorations bold or italic by deselecting the icons in the toolbar.
Split words with text decorations
If you split a word that has bold and/or italic applied (e.g. if you press Enter to create a new text block) the word is properly split at the cursor position and text decorations of the word are properly preserved in both text blocks.
Add link to text
1. Select text in a text block.
2. Click the "link" icon in the toolbar. An input field appears below and centered to the selected text.
3. Type or paste a link in the field and press return. The selected text is now bold/underlined and indicates that there is a link.
Remove link from text
1. Put the cursor inside an existing link and click the "link" icon in the toolbar. (Note that you don't need to select the entire link in order to remove it - it's sufficient to position the cursor within an existing link).
2. The input field will appear. Click the delete icon ("x") next to the input field.
![]()
3. The link itself as well as the text decorations bold/underlined will be removed.
Checklists
Attachments
Issue Links
- depends upon
-
CONTEDIT-36 Fix the "jumping toolbar" on mouse hover
-
- Closed
-
-
CONTEDIT-35 Remove the "strike-through" option in the toolbar of rich-text blocks
-
- Closed
-
- relates to
-
CONTEDIT-13 Add header style to text blocks
-
- Closed
-
- mentioned in
-
Page Loading...