KB Author Training - Body Field - Using the TinyMCE Editor

In this document:

• Body
• Design (WYSIWYG) Editor
• Source mode (HTML) Editing
• Exercise

Body

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:

• Underline and italic formatting: The use of underlined and italicized text is no longer recommended. Underlined text can cause usability issues (as readers may incorrectly interpret it as a link), and italicized text can cause readability issues.

• Font formatting: Font face and size are defined in your site styles. Adjusting these in documents can create inconsistencies across your site. Additionally, font size is sometimes inappropriately used to mimic headings, which should instead be created with the defined heading element.

• Heading level 1: When your KB document is published, the title will display as a heading level 1. Accessibility guidelines state that a webpage should only contain a single heading level 1, so the body of your KB document should only contain heading level 2 and smaller.

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.

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:

• Auto-formatting and code folding: Line breaks will be added between elements to make code easier to navigate. Carets in the left-side row number bar can also be clicked to collapse code blocks.

• Color coding: Tags, attributes, and values are each given a unique color to help them stand out.

• Suggestions: When you start typing a tag, a context menu will appear with suggestions that can be used to auto-complete the tag.

• Tag matching: Clicking on a opening tag will highlight its closing tag (if it already exists), and vice-versa.

• Error detection: Incomplete or incorrectly typed tags will be highlighted in red.

Exercise

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.