HTML email formatting tools overview
Saturday, December 3, 2016 4:35 PM

All modern-day email clients are using HTML-based email editors; FocalScope is no exception and uses the popular CKEditor for creating and formatting emails. This article details the HTML formatting functions of the CKeditor as implemented in FocalScope.

Tutorial

Overview of CKeditor functions

Figure 1 shows the location of all the CKeditor functions in the FocalScope email editor.


Figure 1 - CKeditor functions in FocalScope email editor


The following is a breakdown of each cluster with a brief explanation of what its buttons (from left to right) do :

  1. Source - switches editor to source view showing the raw HTML and CSS. This view is useful for advanced users who want to edit the HTML markup directly
  2. Undo - undo last action in editor. Multiple actions can be undone by clicking the button more than once
  3. Redo - redo undone action. Multiple actions can be redone by clicking the button more than once
  4. Search - locate text in the email body
  5. Replace - replaces text in the email body with the specified substitute
  6. Select all - selects all contents in the email body
  7. Paste as plain text - pastes contents from the clip board, but removes all formatting



  1. Bold - turns selected text bold or sets bold as the formatting at the cursor location
  2. Italicturns selected text italic or sets italic as the formatting at the cursor location
  3. Underlineunderlines selected text or sets underline as the formatting at the cursor location
  4. Strikethrough - adds strikethrough to selected text or sets strikethrough as the formatting at the cursor location
  5. Subscript - adds subscript, e.g., X2
  6. Superscript - adds superscript, e.g., 2nd




  1. Remove formatting - strips off all formatting (including font family) from highlighted content
  2. Add / remove numbered list - toggles numbered list for selection and at cursor location
  3. Add / remove bulleted listtoggles bulleted list for selection and at cursor location
  4. Indent left - shifts text one column to the left
  5. Indent right - shifts text one column to the right
  6. Block quote - creates a block quote area / puts selected text inside a block quote
  7. Add Div container - adds HTML Div container (with configurable options) at cursor location
  8. New line - adds new line at cursor location
  9. Magic line - places new line above or below pasted table element (see detailed usage guide)




    1. Align left - aligns cursor and selection to the left of the page
    2. Align center - aligns cursor and selection to the center of the page
    3. Align right - aligns cursor and selection to the right of the page
    4. Justify - justifies selected text




      1. Hyperlink - creates a hyperlink (with options) from the selected text
      2. Remove hyperlink
      3. Automatic hyperlink detection - toggles automatic link detection in the Thick Client (see detailed usage guide)
      4. Table - inserts table element (with options) at the cursor location
      5. Horizontal line - inserts a horizontal line at the cursor location
      6. Insert special character - inserts special character (with options) at the cursor location
      7. Insert page break - inserts a page break at cursor location for printing
      8. IFrame - inserts IFrame (with options) at the cursor location
      9. Show blocks - shows outline of HTML elements in the email body. Useful for advanced users who wish to troubleshoot any formatting issues




        1. Font color changes selected text's color and sets text color as the formatting at the cursor location
        2. Font background colorchanges selected text's background color and sets text background color as the formatting at the cursor location
        3. Styles - drop-down list with a selection of font styles to apply to selected text or as the formatting at cursor location
        4. Paragraph formatting - drop-down list with a selection of paragraph styles to apply to selected text or as the paragraph formatting at cursor location
        5. Font familydrop-down list with a selection of font families to apply to selected text or as the formatting at cursor location
        6. Font size - input box and drop-down list with a selection of font sizes to apply to selected text or as the formatting at the cursor location