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


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


    • 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, or section of 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 )


    • 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


  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)


    • 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


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


  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.


    Select < > to enable Embedded Code field.


  6. More Rich 
    • Insert Horizontal line

Section Four


  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

Keywords:bold italic inline custom class formatting new editor internal external owner group owner institution site restrictions include doc include news code highlighted transparent clear formatting underline strikethrough subscript font family font size text color background color inline style/ Big red or small blue normal paragraph format Heading 2 heading 3 heading 4 h2 h3 h4 preformatted pre ordered list OL unordered UL upper lower alpha greek roman list UL circle square disc align center left right justify paragraph style line height quote increase decrease indent insert link KB link doc link news link topic to the top insert table table header remove table row column table style cell vertical horizontal split cell background vertical align top middle bottom horizontal align insert image insert URL to emoticons special characters insert horizontal line undo redo download PDF code View more miscellaneous misc full screen print select all Help   Doc ID:95474
Owner:Leah S.Group:KB User's Guide
Created:2019-10-31 09:33 CSTUpdated:2021-09-03 11:06 CST
Sites:KB User's Guide, Social Science Computing Cooperative
Feedback:  0   0