KB User's Guide - Documents Tab - Guide to TinyMCE Editor Buttons

This document describes the buttons found in the TinyMCE editor and their functions.

There are two bars of buttons within the editor, the upper navigation bar, and the lower tool bar.

Menu Bar

Image of the TinyMCE menu bar

The navigation bar has several tabs in a layout similar to other applications:

File

  • New Document - Creates a new document

Edit

  • Undo - Undoes Typing
  • Redo - Redoes Typing
  • Cut - Cuts text to clipboard
  • Copy - Copies text to clipboard
  • Paste - Pastes text from clipboard
  • Paste as Text - Pastes text from clipboard removing formatting
  • Select all - Selects all content within the body section of a document

View

  • Source Code  - Switches to code view mode
  • Visual Aids - Toggles TinyMCE visual aids
  • Spellcheck - Toggles spell checking within the document
  • Fullscreen Mode - Enables fullscreen editing mode

Insert

  • Link - Insert Hyperlink
  • KB link doc - Insert Link Doc
  • KB include doc - Insert Include Doc
  • Anchor - Inserts an anchor tag at the cursor
  • 'To the top' link - Insert a link to the top of the page
  • KB attachments - Upload or insert KB attachments
  • Image - Displays a pop-up to insert an image from a source URL. For images hosted within a KB attachment folder, use the KB attachments option
  • Media - Opens pop-up to embed media with a specified link
  • Collapsible panel - Insert a collapsible panel
  • Button - Insert a link styled as a button
  • Feedback form - Insert a custom feedback form
  • Insert/Edit iframe - Opens iframe pop-up, which allows you to embed another document into your current document 
  • Import from url - Imports HTML from an external webpage
  • Horizontal Line - Inserts a horizontal line

Format

  • Bold - Marks the highlighted text as bold
  • Italics - Italicizes highlighted text
  • Strikethrough - Strikes through highlighted text
  • Superscript - Creates text above the current line
  • Subscript - Creates text below the current line
  • Checklist- Inserts an unordered checklist with checkable boxes
  • Code - Adds code styling to selected text
  • Formats
    • Headings - Headings options: Heading 2, Heading 3, Heading 4, and Heading 5
    • Inline - Controls for bold, italics, strikethrough, superscript, subscript, and code formatting
  • Blocks - Paragraph, preformatted, and heading options
  • Align - Opens text alignment menu, allowing you to align highlighted text to the left, right, or center of the page, or to justify the text to the center (no alignment)
  • Line Height - Opens line height/line spacing menu
  • Text Color - Allows selection of text color
  • Background Color - Allows selection of text background color
  • Clear Formatting - Clears formatting on selected text

Tools

Help

Opens a pop-up window with sections of information for:

  • Handy Shortcuts - Displays all the editor related keyboard shortcuts 
  • Keyboard Navigation - Instructions on how to activate and use a keyboard to navigate around the editor
  • Plugins - Links to KB User's Guide or TinyMCE documentation for the various editor plugins
  • Version - Displays the current editor version number

Tool Bar

Image of the TinyMCE toolbar

The tool bar contains a few unique buttons, however most of the buttons on the bar are for quick access to functions already described in the navigation bar. The toolbar functions are as follows:

Note: Depending on your screen width, some, or all, of the table, link, image, media, fullscreen, source code, and plugin icons may be hidden behind the More button: tinymce editor more toolbar icon

Table

The table sub-menu allows insertion and editing of tables in documents. The options available when a table is selected are also available by right clicking an existing table within a doc. Within this sub-menu, you have several options:

  • Table - Select the table size using the grid to insert at the cursor

  • Cell - Edit cell properties, merge, and split cells 

  • Row
    • Insert Row after - Inserts a row after the selected row
    • Insert Row Before - Inserts a row before the selected row
    • Delete Row - Deletes the selected row
    • Row Properties - Opens the row Properties menu, which allows you to change:
      • Row type
      • alignment
      • height
      • border style
      • border color
    • Cut Row - Cuts the selected row to the clipboard
    • Copy Row - Copies the selected row to the clipboard
    • Paste Row Before - Pastes row before the selected row
    • Paste Row After - Pastes row after the selected row

  • Column
    • Insert Column after - Inserts a column after the selected column
    • Insert Column Before - Inserts a column before the selected column
    • Delete Column - Deletes the selected column
    • Cut Column - Cuts the selected column to the clipboard
    • Copy Column - Copies the selected column to the clipboard
    • Paste Column Before - Pastes column before the selected column
    • Paste Column After - Pastes column after the selected column

  • Sort
    • Sort by Column Ascending - Sorts the table by the selected column in ascending order
    • Sort by Column Descending - Sorts the table by the selected column in descending order
    • Advanced Sort - Opens advanced sort pop-up, to help with advanced table sorting

  • Table Properties - opens pop-up with options to change table width, height, cell spacing, cell padding, border width, caption,border styling, and colors

  • Delete Table - Deletes the selected table


Keywordstiny tinymce buttons editor docs document guide wysiwyg what you see is what you getDoc ID114924
OwnerLeah S.GroupKB User's Guide
Created2021-11-18 14:20:46Updated2023-02-28 13:29:41
SitesKB User's Guide
Feedback  0   0