Uploaded image for project: 'Content Editor'
  1. Content Editor
  2. CONTEDIT-12

Allow to decorate text as bold and italic and to set links in text blocks

    XMLWordPrintable

Details

    • Story
    • Resolution: Fixed
    • Neutral
    • 1.0
    • None
    • None
    • 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

        Acceptance criteria

        Attachments

          1. story add link 01.01.png
            story add link 01.01.png
            105 kB
          2. story add link 01.02.png
            story add link 01.02.png
            107 kB
          3. story add link 01.04.png
            story add link 01.04.png
            104 kB
          4. story add link 01.05.png
            story add link 01.05.png
            104 kB
          5. story add link 01.06.png
            story add link 01.06.png
            109 kB
          6. story add link 01.07.png
            story add link 01.07.png
            104 kB
          7. story decorate text 01.01.png
            story decorate text 01.01.png
            100 kB
          8. story decorate text 01.02.png
            story decorate text 01.02.png
            102 kB
          9. story decorate text 01.03.png
            story decorate text 01.03.png
            101 kB

          Issue Links

            Activity

              People

                apchelintcev Aleksandr Pchelintcev
                avongunten Anja von Gunten
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoD