KB User's Guide - Documents tab - New Editor - WYSIWYG Editor Icons explained

The editor icon bar is broken up into four sections, this document will review the features in all four sections.


Section One

SectionOne_Dec2020.png


  1. Bold - Marks the highlighted text as bold.
  2. Italic - Italicize the highlighted text
  3. Inline classes: (The down arrow reveals a dropdown menu).

    InlineClasses_Dec2020.png

    • KB internal sites only - <span class="kb-class-internal-site">...</span>
      Text visible on internal KB sites only

    • KB external sites only - <span class="kb-class-external">...</span>
      Text visible on external KB sites only

    • KB owner group sites only - <span class="kb-class-ownersite">...</span>
      Embed site specific content anywhere within a KB document (or news item). Site specific content is visible to owner site only even when the document is shared across multiple sites / groups / institutions.

    • KB owner Institution sites only - <span class="kb-class-ownerinstitution">...</span>
      Embed institution specific content anywhere within a KB document (or news item). Institution specific content is visible to owner institution sites only, even when a document is shared across multiple campuses / schools.

    • KB Include doc - <span class="kb-class-include-doc">...</span>
      Embed the body of another document. For more info see KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content .

    • KB Include news - <span class="kb-class-include-news">...</span>
      Embed the body of a News item into another News items.

    • Code - <span class="fr-class-code">...</span>
      Used to insert fragments of program code, variables, etc. into a document. The code is displayed in a monospaced font (e.g. a font in which all characters are of the same width) surrounded by a gray highlight.


  4. Clear formatting - Clears the formatting of a section of text or the entire document. Any formatting applied to the selected text will be removed.

    • *Note - If the formatting was applied by the features found in Section One, then the "Clear Formatting" button will remove formatting. This button will not remove formatting applied using features in Sections 2, 3 or 4.

  5. More Text (click on the icon to reveal the following features )

    More_Text_Dec2020.png


    • Subscript - Create small letters below the text baseline.
    • Superscript - Create small letters above the line of text.
    • Text Color - Changes the text color of the highlighted text
    • Background color - Changes the background color of highlighted text
    • Inline style/ Big red or small blue - Changes highlighted text into large red font  color or smaller blue font color


Section Two

Section2_Dec_2020.png

  1. Paragraph Format

    • Normal
      Apply this formatting to paragraph text in your document.

    • Heading 2

    • The <h2> tag in HTML.  The first heading in your document will, ideally, be Heading 2. Heading 1, <h1>, is reserved only for the Title of the document.

    • Heading 3

      The <h3> tag in HTML. The next heading after Heading 2, ideally, will be Heading 3. Skipping heading ranks can be confusing and should be avoided when possible.

    • Heading 4

      The <h4> tag in HTML. The next heading after Heading 3, ideally, will be Heading 4. Skipping heading ranks can be confusing and should be avoided when possible.

    • Preformatted

      Highlighting text with the preformatted tag, <pre>, displays in a fixed-width font, and it preserves both spaces and line breaks.
      • *Note - Text wrapped with the preformatted tag will be on it's own line (e.g. cannot be placed within a sentence as the text wrapped in the <pre> tag will become its own line).

  2. Ordered list
    Clicking on the ordered list button will prompt the default ordered list style beginning with Arabic numeral 1.

    The down arrow reveals the following ordered list features.

    • Default - List style begins with Arabic numeral 1
    • Lower Alpha - List style begins with lower case a
    • Lower Greek - List style begins with lower case alpha  (α)
    • Lower Roman - List style begins with lower case Roman numeral i
    • Upper Alpha - List style begins with capital A
    • Upper Roman - List style begins with upper case Roman numeral I

  3. Unordered list
    • Default - Bullet style defaults to disc
    • Circle - Bullet style appears as a circle
    • Disc - Bullet style appears as a disc
    • Square - Bullet style appears as a square

  4. Align Center - Aligns highlighted text to center

  5. Align Left - Aligns highlighted text to the left

  6. More paragraph (Click on this icon to reveal more features)

    MoreParagraph_Dec2020.png


    • Align right - Aligns highlighted text to right
    • Justify - Aligns highlighted text to fit a specific width
    • Paragraph Style: Styles text in your paragraph

      • Gray (example) - Text is gray
      • Bordered (example) - Text appears with a border
      • Spaced (example) - Text letters are spaced out
      • Uppercase (example) - All text converted to upper case

    • Decrease indent - Remove indents
    • Increase indent - Add indent
    • Quote Increase - Block of text indented
    • Quote decrease -Block of text un-indented


Section Three

Section3_Dec2020.png

  1. Insert link - Insert a hyperlink to a URL or to KB resources (The down arrow reveals a dropdown menu).

    LinktoKB.png

  2. Anchor - Insert anchor tag

  3. Insert table - A pop up will appear, highlight the number of columns and rows desired for a table. To view the additional table features, click inside a cell of the table you created to reveal:

    • Table header - Create top line formatted as a header
    • Remove table - Remove all table code
    • Row - Identifies row
    • Column - identifies column
    • Table style - Select a style
    • Cell - Vertical Split or Horizontal split
    • Cell Background - Color of cell
    • Vertical Align - Top, Middle, Bottom
    • Horizontal Align - Align left, right, center, justify
    • Cell style - Highlighted  or Thick

  4. Insert image - Link a URL to an image (however, we recommend that you enter all images into the document image folder).

  5. Insert Video - Defaults to Paste in a video URL field.

    Video_Dec2020.png

    Select < > to enable Embedded Code field.

    Vid_Embedded_Dec2020.png

  6. More Rich 
    • Insert Horizontal line


Section Four

SectionFourIcons.png


  1. Undo - Undo edit
  2. Redo - Replace edits
  3. Code View - Clicking on this button leads you to the HTML view
  4. Full screen - opens to full screen
  5. Select All - selects all content on the document