KB Author Training - Body Field - Editor Options: Design (WYSIWYG) or HTML mode

Background

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 in your document. As you prepare to edit the body of your document, you should be aware of the options available to you through the document editor.

Design (WYSIWYG) Editor

The KB document editor allows you to write and edit documents in two different modes, the first of which is called Design or WYSIWYG.

'WYSIWYG' is an acronym that stands for 'What You See Is What You Get'.

In the context of the KB, when you make changes to your document's formatting in the WYSIWYG editor, those changes appear instantly in the Body field Moreover, what you see in the editor is what shows up in the document itself. For instance, text that appears formatted in the WYSIWYG editor (as in the below screenshot) will appear formatted in the final version of the document.

The WYSIWYG editor functions much like a traditional word processing application. Additionally, many of the editor's formatting buttons are familiar looking icons. Because of the immediate visual feedback it provides, the WYSIWYG editor is generally considered to be the easier of the two methods of editing KB content. The WYSIWYG editor is enabled by default for new users.

Advantages:

• Familiar interface
• Immediate visual feedback
• Easy to make quick changes

Disadvantages:

• Less fine-grained control over formatting.
• May not handle custom JavaScript well.

HTML Editor

The second mode of editing documents is available through the HTML editor. In contrast to the WYSIWYG editor, the HTML editor requires you to format the body of your document in a markup language called 'XHTML'. You can use the HTML editor even if you are not proficient in XHTML because it includes 'Quick Code' buttons that insert snippets of XHTML for common formatting tasks. However, because documents appear in the editor as XHTML markup, updates you make will not be immediately apparent; you must click Preview button to see changes rendered in your web browser. The screenshot below is a document in the HTML editor that produces the same output as displayed in the above screenshot of the WYSIWYG editor.

Although you will have the opportunity to use the Quick Code buttons in a subsequent training document, the broader topic of document design using XHTML falls outside the scope of this series of training documents. If you wish to learn more about XHTML and other web technologies, please see the Resources section of the final document in the training series.

Advantages:

• Access to Quick Code buttons
• Fine-grained control over document appearance
• Ability to annotate markup associated with your document

Disadvantages:

• Some XHTML knowledge required to make changes beyond basic formatting
• Typically takes more time to edit documents

Switching Between Editors

It is not necessary to remain in a single mode in the document editor. In fact, it can be helpful to switch back and forth between modes depending on what you're trying to accomplish. For instance, you could use the WYSIWYG editor to quickly publish a document. You could then use the HTML editor to add custom formatting to that document.

If you begin a document in the WYSIWYG editor and switch to the HTML editor, you can interact with the XHTML markup generated by the editor. Conversely, if you begin a document in the HTML editor and switch to the WYSIWYG editor, you can see and manipulate the design. You can switch back and forth between the two editors using the button at the lower left corner of the main editor window, pictured below:

WYSIWYG to HTML

HTML to WYSIWYG

Setting Default Editor

If you use one editor more often than the other, or if you use one editor exclusively, it is possible to set that editor as the default for your account. In order to set the default editor for your account:

1. Click on the Home tab in the upper left of the KB Admin Tools.
2. Click on the link in the left-hand column labeled My Profile.



3. The bottom part of the My Profile screen is labeled Editor mode. You can select the option that best suits your editing style. Note that if you choose one of the options labeled ONLY, you will lose the option to switch back and forth between editors until you change your default mode selection.




4. Click the Update button in order to save your changes.

Exercise

1. If you are not already logged in, log into the KB Admin Tools.
   
   Note: If your institution is not using Shibboleth, go to the Active Directory Login.

2. Click on the Documents tab.

3. Click on the New Doc link on the left-hand menu.

4. As a new user, your editor will default to Design/WYSIWYG mode. Try typing some sample text in the Body field. Highlight the text and bold it by clicking the button.

5. Click the HTML button located at the lower left corner of the Body field to switch the editor to HTML mode. You should see the text you typed along with the markup that accompanies bold text.

6. Click on the Home tab. You will receive a prompt warning you about losing unsaved changes. Click OK to leave the page.

7. Click on the My Profile link in the left-hand column.

8. Select the option labeled 'HTML Source mode Only'. Click Update to save changes. You should see a notification along the top of the page reading 'Your profile has been updated'.

9. Click the Documents tab and then on the New Doc link on the left-hand menu.

10. Note that there is no longer a button at the lower left corner of the Body field allowing you to switch between editor modes. Click the button to place the XHTML markup for bolded text in the Body field. Enter some text between the XTHML tags (<strong>HERE</strong>). Click Preview to view the text as it would appear in a published document.

11. Close out of the preview window. Click on the Home tab and hit OK to leave the page. Then click on the My Profile link.

12. Set your default editor mode back to 'WYSIWYG Design mode (default) + HTML with Quick Code Buttons' (or whichever mode you prefer) and click the Update to save your changes.