KB Author Training - Body Field - Using the TinyMCE Editor

This training document provides detailed information about the two modes of the document Classic editor: Design (What-You-See-Is-What-You-Get, or WYSIWYG) and HTML. It also includes training exercises that demonstrate how to switch between these two modes. For detailed information about other aspects of the document editor, please continue with this training series or return to the KB Author Training - Overview.

In this document:


The Body field is where the majority of a document's content is stored. The body should contain the information you wish to convey to your audience. As you prepare to edit the body of your document, you should be aware of the options available to you through the document editor.

The KnowledgeBase uses a third-party editor called TinyMCE. The primary editing interface for TinyMCE is a What You See Is What You Get (WYSIWYG) editor, aka a rich text or design mode editor. TinyMCE also includes a "Source Mode" feature that allows you to edit the HTML of your document directly.

Design (WYSIWYG) Editing

When you first open a document to edit, you will be in the editor's design mode. This is much like editing with a traditional word processing application, where you can apply common types of formatting to new or existing text. For example, you will find options to bold text, insert hyperlinks, or structure text with lists.

Certain formatting options have been deliberately removed from the editing interface to promote best practices for accessibility and style consistency. In particular, you may notice that the following options have been removed:

For a full overview of the toolbar and menu options in TinyMCE, please see KB User's Guide - Documents Tab - Guide to TinyMCE Editor Buttons.

Source mode (HTML) Editing

The TinyMCE editor includes a Source mode feature, which opens a window with the HTML that has been generated for your document. This is useful for cases where you would like to format your document in a way that is not easily achievable in design mode, or if you would like to use more advanced coding, such as custom classes and IDs, for styling purposes.

This option can be accessed on the far right end of the toolbar, as well as under the Tools menu.

Screenshot of the source code button, which is the last button in the toolbar and looks like an HTML tag.

Please note that HTML will need to be entered manually. However, the "Source mode" window includes a number of useful features to make it easier to work in HTML:


  1. If you are not already logged in, log into the KB Admin Tools.
  2. Click on the Documents tab.
  3. Click on the Create a Doc link on the left navigation bar.
  4. Try typing some sample text in the Body field. Highlight the text and bold it by finding and clicking the bold (B) button.
  5. Click the Source code (< >) button located on the right end of the toolbar. You should see the text you typed along with the markup that accompanies bold text.
  6. You may now close the page without saving changes.