Editing Content on Fragment Editor

✔️ Fragment Editor Toolbar Menu Basics

Figure 1. Fragment Editor

• Toolbar Menus are provided to help users effectively edit content of their Fragments.
• In the figure above, each menu in the toolbar is: (in left to right order)
  • Heading 1 through 6
  • Bold
  • Italic
  • Strike-through
  • Underline
  • Unordered list (Bulleted list)
  • Ordered list (Numeric list)
  • Link to images
  • Link to Web pages
  • Link to Fragments
  • Quoting
  • Code
  • HTML (Experimental; not recommeded to use yet so not documented)
  • Folding
  • Line indenting
  • Line outdenting
  • Changing text color
• Before executing any menu, you need to first select text (or multiple lines of text) to which the menu would apply.
• Each menu corresponds to one of Markdown commands or Civilizer Custom Markup commands.
• Most of the menus have their own shortcut keys assigned.
  • When you hover on each menu, a tooltip message will appear to let you know which shortcut key sequence it is assigned to.
  • Notice that the OS or browser may already use some of these shortcut keys and in that case, directly clicking on menus would be the only option.

---

✔️ Advanced Functionalities of Fragment Editor

• Line Indenting/Outdenting
  • Indenting or outdenting multiple lines with a single space width can be done by clicking Line indenting or Line outdenting menu on the toolbar.
  • Also you can indent/outdent lines in 4 spaces width using the TAB/SHIFT key press:
    • Indent by 4 spaces : press the Tab key
    • Outdent by 4 spaces : press the Shift + Tab key
    • These functions are not associated with any toolbar menu.
    • These functions are useful if you want to preformat multiple lines at once.
• Changing Text Color
  • By colorizing some of your text, you can make it more distinguishable than just styling it with bold or italic.
  • Drop down menus for changing text color will appear by hovering on the icon of a small triangle located on the far right of the toolbar.
  • First select the text ( or multiple lines ) of which you want to change color, and then click one of the text color menus. (See the figure below)
  • Currently, no shortcut keys are associated with the menus.
  • This function is provided via one of Civilizer Custom Markup commands so you can manually type the commands.

Figure 2. Text Color Menu

• Vertical Line Moving
  • By pressing Alt + Up/Down, you can vertically move a line under the caret upward or downward.
  • Also by pressing the same key combination after selecting multiple lines, you can vertically move those lines upward or downward.
• Duplicating Lines
  • By pressing Control + Alt + Up/Down, you can duplicate a line under the caret.
  • Also by pressing the same key combination after selecting multiple lines, you can duplicate those lines.
• Folding
  • Folding can make some block of your content togglable, which means you can make it show/hide by clicking a button or title attached to it.
  • How to fold some of your content:
    1. Select multiple lines of text you want to fold.
    2. Click the Fold menu ( a plus (+) symbol inside a square ).
    3. A dialog will ask you a title of the fold.
       • The title is optional.
       • The default : ... ( just 3 periods )
    4. Click OK.
• A Link to an image or web page
  • Full qualified URLs will become clickable automatically.
    • Any text starting with http:// or https:// will be recognized as a link to a web page and it will be clickable when it is rendered to HTML.
    • To prevent a specific URL from being clickable, do either of the following:
      • Wrap the URL text with backticks (`).
      • Or select the URL text and click the toolbar menu of Code
  • Any link to the following image types will be rendered as the image itself automatically.
    • PNG, JPG, GIF, BMP, ICO
    • The image type will be identified by the file extension.
    • Any image URL with no file extension or neither of the above won't get rendered as image and will get rendered simply as a clickable URL.
      • In this case, use the Markdown image link syntax to show the image.
• A Link to a Fragment
  1. Click the Link to Fragments toolbar menu.
  2. A dialog will ask you the ID of the Fragment to link.
  3. Type the ID and click OK.
• A Link to a File
  • When you have some files stored in your File Box, you can insert links to them.
  • Refer to the section of Inserting a link to a File into a Fragment on Basic Operations for File Box.
• A Link to a Tag
  • You can add a link to a Tag in the similar way you add a link to a file.
    1. Grab the target Tag in the Tag Palette with your mouse.
    2. Drag and drop it to the content textarea in Fragment Editor.
    3. A Civilizer Custom Markup command will be generated at the place where the caret was located.
    4. After saving the Fragment, you can see a link to the Tag generated.

---

✔️ Limitations

• No current support for redo/undo