KB Author Training - Body Field - Design (WYSIWYG) Editor Controls
This training document provides detailed information about the formatting options available through the Design (WYSIWYG) editor. It also includes a training exercise which demonstrates the functionality of select WYSIWYG formatting controls. For detailed information about other aspects of the document editor, please continue with this training series or return to the KB Author Training - Overview.
What You See IS What You Get (WYSIWYG) Controls
The WYSIWYG editor features a number of formatting controls that allow you to change the appearance of your KB documents. Some of the controls, such as buttons for bolding and italicizing text, should be familiar to users of common word processing applications. Others, like the 'Linkdoc' button, are specific to the KB. If you are in the document editor and are unsure about what a given button does, you can hover over it with your mouse and a tooltip containing the button's name will appear.
All Editor Buttons found in the Design (WYSIWIG) Editor
The image below shows the two bars of icons that appear above the Body field when editing a KB document in the Design or WYSIWYG editor.
Editor Buttons and their Descriptions
Below, you will find the image of an Editor button and a description of its function.
Select header. Highlighted text will be formatted with selected format. The dropdown list shows "Header 1" (largest) through "Header 4" (smallest). The "Paragraph" option restores text to the default font and font size of your KB Site. The "PRE" option changes highlighted text to a fixed-width font (Courier).
Insert special characters. Click on this icon and see a table of special characters from which you can choose. Example:ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃ¢â¬ ÃÂ¢Ã¢âÂ¬Ã¢âÂ¢ÃÆÃâÃÂ¢Ã¢âÂ¬Ã Â¡ÃÆÃ¢â¬Å¡ÃâÃÂ¢ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃ¢â¬Å¡ÃâÃÂ¢ÃÆÃâÃâÃÂ¢ÃÆÃÂ¢ÃÂ¢Ã¢âÂ¬Ã Â¡ÃâÃÂ¬ÃÆÃ¢â¬Â¦ÃâÃÂ¾ÃÆÃâÃÂ¢Ã¢âÂ¬Ã Â¡ÃÆÃ¢â¬Å¡ÃâÃÂ¢ , ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃ¢â¬ ÃÂ¢Ã¢âÂ¬Ã¢âÂ¢ÃÆÃâÃÂ¢Ã¢âÂ¬ÃÂ¦ÃÆÃ¢â¬Å¡ÃâÃÂ½ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃÂ¢ÃÂ¢Ã¢â¬Å¡ÃÂ¬Ãâ¦ÃÂ¡ÃÆÃâÃÂ¢Ã¢âÂ¬Ã Â¡ÃÆÃ¢â¬Å¡ÃâÃÂ©, ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃ¢â¬ ÃÂ¢Ã¢âÂ¬Ã¢âÂ¢ÃÆÃâÃâÃÂ¢ÃÆÃÂ¢ÃÂ¢Ã¢âÂ¬Ã Â¡ÃâÃÂ¬ÃÆÃ¢â¬Â¦ÃâÃÂ¡ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃÂ¢ÃÂ¢Ã¢â¬Å¡ÃÂ¬Ãâ¦ÃÂ¡ÃÆÃâÃÂ¢Ã¢âÂ¬Ã Â¡ÃÆÃ¢â¬Å¡ÃâÃÂ§, ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃ¢â¬ ÃÂ¢Ã¢âÂ¬Ã¢âÂ¢ÃÆÃâÃÂ¢Ã¢âÂ¬ ÃÆÃÂ¢ÃÂ¢Ã¢â¬Å¡ÃÂ¬ÃÂ¢Ã¢â¬Å¾ÃÂ¢ÃÆÃâÃâ Ã¢â¬â¢ÃÆÃÂ¢ÃÂ¢Ã¢â¬Å¡ÃÂ¬Ãâ¦ÃÂ¡ÃÆÃâÃÂ¢Ã¢âÂ¬Ã Â¡ÃÆÃ¢â¬Å¡ÃâÃÂ± and many more.
Popup will display to enter path to saved image. This tag is rarely used. For more info see KB User's Guide - Documents Tab - Inserting an Image from a URL
Popup will display to configure attributes of Image. This tag is rarely used. For more info see Item 6 in document KB User's Guide - Documents Tab - Inserting an Image from a URL
Feedback Form (<div class="kbInPageForm"></div>)
Inserts Feedback form into a document. This feedback can collect user information and be emailed to a specific person in your KB Group. Please see KB User's Guide - Documents Tab - Embed a Generic Comment/Feedback Form into a KB Document for details and instructions.
Includedoc (<a class="includedoc">...</a>)
You may build documents that include 'body' elements from other documents, which by themselves include 'body' elements from yet more documents. The "Includedoc Chain" can go up to eighty layers deep (so there is no infinite looping). When the depth limit is reached, the last layer of 'IncludeDoc'(s) is converted into 'LinkDoc'(s). Access permissions, 'LinkDoc' tags, 'Htmlentity' tags, etc. are all honored along the "IncludeDoc chain". Infinite loops are prevented without enforcing any depth limit. For more info see KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content .
Owner site custom tag (<span class="ownersite">...</span>)
This tag allows authors to embed site specific content anywhere within a KB document (or news item). Site specific content is visible to owner site only even when the document is shared across multiple sites / groups / institutions.
Owner institution tag (<span class="ownerinstitution">...</span>)
This tag allows authors to embed institution specific content anywhere within a KB document (or news item). Institution specific content is visible to owner institution sites only, even when a document is shared across multiple campuses / schools.
Click on the Documents tab.
Locate the document you edited in the previous exercises and open it for editing. If you are unsure how to locate the document, return to KB Author Training - Editing an Existing Document and review the instructions there.
Use the following text: Giraffe Field Guide and formatting controls in the design editor to replicate the document pictured below (click thumbnail to open full sized image in new window):
This will require you to use the below controls:
Insert Image. Use the following URL for your image: http://pixabay.com/static/uploads/photo/2012/02/25/18/44/africa-16831_640.jpg. If an image is not available at the aforementioned URL, you can use any applicable image URL (please also submit feedback on this document indicating that the provided URL is out-of-date).
If you are having trouble determining which controls were applied where in order to achieve the intended results, you can refer to the annotated image below for guidance (click thumbnail to open full sized image in new window):
Once you are done making the changes necessary to reproduce the document, click Save Changes.
Scroll to the bottom of the document, make sure that In Progress is the selected status and click Submit.