Rich Text Editor

What is the Rich Text Editor?

In most areas of the system where text can be entered, you can control the appearance of your text using the rich-text editor, sometimes called a WYSIWYG (What You See Is What You Get) editor. The rich-text toolbar has icons for editing and formatting your text. You may use the rich text editor to include images, links, audio, and video as well as text. The rich-text editor is based on an open-source application called CKEditor. For more information on the CKEditor, you may also refer to the CKEditor 4 Documentation Site.

Note: Pasting text into the rich-text editor should preserve most formatting, but some types of formatting, such as colored text, may need to be added manually in the editor after pasting.

Rich Text Editor Toolbar

Toolbar Interface

The following section is an overview of the various icons available for use in the Rich-text Editor's toolbar.

Document/Editor Tools

Rich-text editor toolbar with the editor tools highlighted.

  • Source buttonSource - view or edit the document source code (for advanced users).
  • Templates buttonTemplates - select a layout template.
  • Cut buttonCut - cut the highlighted text and copy it to the clipboard.
  • Copy buttonCopy - copy the highlighted text to the clipboard.
  • Paste buttonPaste - paste the data copied to the clipboard.
  • Paste as Plain Text buttonPaste as Plain Text - paste the data copied to the clipboard without formatting.
  • Paste from Word buttonPaste from Word - paste content copied from Microsoft Word or similar applications.
  • Print buttonPrint - print the current document.
  • Undo buttonUndo - undo the most recent action taken.
  • Redo buttonRedo - redo the most recent action taken.
  • Find buttonFind - find a word or phrase within the document.
  • Replace buttonReplace - find and replace a word or phrase within the document.
  • Select All buttonSelect All - select the entire text in the document.
  • Remove Format buttonRemove Format - remove the formatting from the highlighted text.
  • Maximize buttonMaximize - maximizes the editor size inside the browser.
  • Show Blocks buttonShow Blocks - shows where there are block elements boundaries in the text.

Format Text

Screenshot of the rich-text editor with the text styling and formatting tools highlighted.

  • Bold buttonBold - applies Bold formatting to highlighted text.
  • Italic buttonItalic - applies Italic formatting to highlighted text.
  • Underline buttonUnderline - applies Underline formatting to highlighted text.
  • Strike Through buttonStrike Through - applies Strike Through formatting to highlighted text.
  • Subscript buttonSubscript - subscript the highlighted text.
  • Superscript buttonSuperscript - superscript the highlighted text.
  • Styles buttonStyles - apply special styles to a block of text.
  • Format buttonFormat - applies paragraph formatting to a block of text.
  • Font buttonFont - applies a specific font to a block of text.
  • Size buttonSize - applies a specific size to a block of text.
  • Text Color buttonText Color - changes the color of the text.
  • Background Color buttonBackground Color - changes the background color of the text.

Layout Options

Screenshot of the rich-text editor with the text layout and alignment tools are highlighted

  • Insert/Remove Numbered List buttonInsert/Remove Numbered List - create/remove numbered lists.
  • Insert/Remove Bulleted List buttonInsert/Remove Bulleted List - create/remove bulleted lists.
  • Decrease Indent buttonDecrease Indent - decrease the paragraph indent.
  • Increase Indent buttonIncrease Indent - increase the paragraph indent.
  • Block buttonBlock - format a block of text to identify quotations.
  • Create DIV Container buttonCreate DIV Container - creates a container to apply formatting beyond one block of text.
  • Align Left buttonAlign Left - set text alignment left.
  • Align Center buttonAlign Center - set text alignment center.
  • Align Right buttonAlign Right - set text alignment right.
  • Justify buttonJustify - justify text alignment.
  • Text Direction Left to Right buttonText Direction Left to Right - displays text left to right.
  • Text Direction Right to Left buttonText Direction Right to Left - displays text right to left.

Insert Media & Other Elements

Screenshot of the rich-text editor with the embedding tools are highlighted

  • Link buttonLink - create/edit hyperlink.
  • Unlink buttonUnlink - remove a hyperlink.
  • Anchor buttonAnchor - inserts or modifies a link anchor.
  • Record Audio Clip buttonRecord Audio Clip - create and display a voice recording.
  • Image buttonImage - inserts images into the document.
  • Insert/Edit Movie buttonInsert/Edit Movie - inserts a movie/audio player.
  • Table buttonTable - creates a table with the defined number of columns and rows.
  • Insert Horizontal Line buttonInsert Horizontal Line - inserts a divider line (horizontal rule).
  • Smiley buttonSmiley - inserts an emoticons image (smiley faces, email icon, light bulb, etc.).
  • Insert Special Character buttonInsert Special Character - inserts symbols & special characters (accented characters, trademark, currency symbol, etc.).
  • Add MathML Formula buttonAdd MathML Formula - creates mathematical symbols using MathML language.
  • Insert Font Awesome icon buttonInsert Font Awesome icon - insert icon from the Font Awesome library.