KB Author Training - Body Field - Design (WYSIWYG) Editor Controls for the Classic Editor

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 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.

To become more familiar with the New Editor, please refer to this document, KB User's Guide - Documents Tab - Guide to TinyMCE (New Editor) Buttons .

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.

DesignViewButtonsHeaderFontFont SizeFont ColorBackground ColorBoldItalicUnderlineStrikethroughSuperscriptSubscriptSpecial CharactersHorizontal RuleHorizontal Rule CSSText CSSRemove CSSUndoRedoRemove FormatToggle Full ScreenLinkUnlinkName AnchorMail LinkInsert ImageImage PropertiesUnordered ListOrdered ListUnordered ChecklistOrdered ChecklistIndentOutdentJustify LeftJustify CenterJustify RightJustify FullTableInsert Row AboveInsert Row BelowInsert Column LeftInsert Column RightRemove RowRemove ColumnTo the top anchorLink DocInclude DocInternal ContentExternal ContentOwner ContentInstitution Content

Editor Buttons and their Descriptions

Below, you will find the image of an Editor button and a description of its function. select_header.gif  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).

select_font.gif Select font style. Highlighted text will be formatted with selected font style. The drop down menu shows all the fonts available.

select_size.gif  Select font size. Highlighted text will be formatted with the selected font size. Select sizes 1 (smallest) to 7 (largest).

forecolor_on.gif  Highlighted text will be changed to the selected color.

backcolor_on.gif Background behind highlighted text will be changed to the selected color.

bold.gif Marks the highlighted text as bold.

italic.gif Italicize the highlighted text

underline.gifUnderline the highlighted text

strikethrough.gif Draw a line through the middle of the highlighted text.

superscript.gif Create small letters above the line of text.

subscript.gif Create small letters below the text baseline.

specialchar.gif Insert special characters. Click on this icon and see a table of special characters from which you can choose. Example:

! " # $ % & ' ( ) * + , - . :

; ? @ [ \ ] ^ _ ` { | } ~

and many more.

inserthorizontalrule.gif Insert horizontal rule.

hr_css.gif Popup box displays to configure CSS attributes of horizontal rule. Choose attributes from dropdown boxes, scroll to bottom of popup, click Insert HR.

text_css.gif Popup displays to configure CSS attributes for selected text. Choose attributes from dropdown boxes, scroll to bottom of popup. click Apply Text CSS

remove_css.gif Removes CSS from where cursor is placed or from highlighted text.

undo.gif Undo typing.

redo.gif Redo typing.

removeformat.gif Remove formatting.

fullscreentoggle.gif Click to expand editor window to full screen. Click again to return to standard size.

link.gif Insert Hyperlink.

unlink.gif Remove Hyperlink from URL.

anchor.gif Insert anchor tag.

maillink.gif Insert Mailto link. Click here to insert clickable link to an email address.

insertimage.gif Popup will display to enter path to saved image. This tag is rarely used. For more info see [Link for document 5544 is unavailable at this time]

editimage.gif  Popup will display to configure attributes of Image. For more info see Item 6 in document  [Link for document 5544 is unavailable at this time]

insertunorderedlist.gif Insert bulleted (unordered) list.

insertorderedlist.gif Insert numbered (ordered) list

indent.gif Increase the indent level of the paragraph.

outdent.gif Decrease the indent level of the paragraph.

justifyleft.gif Align text to the left.

justifycenter.gif  Center text.

justifyright.gif  Align text to the right.

justifyfull.gif  Align text along both left and right margins.

inserttable.gif Insert Table. Clicking on this button yields a Table Properties form.

insertrowabove.gif  Insert row above.

insertrowbelow.gif Insert row below.

insertcolumnleft.gif Insert column to the left.

insertcolumnright.gif Insert column to the right.

deleterow.gif Delete row.

deletecolumn.gif Delete column.

Custom Tags

toptopDesign  TopTop (<div class="to-kb-doc-top-anchor"><a href="#">To the top</a></div>)
Inserts a link that leads to the top of the KB Doc. This link can be edited as desired.  

feedbackform.png 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.  

linkdoc.gif Linkdoc (<a class="linkdoc">...</a>)
Insert link in to KB Doc. Allows up to six layers of inclusion.  

includedoc.gif Includedoc (<a class="includedoc">...</a>)
Include the 'body' element, or a section of the body element, from another document. Included documents may themselves include 'body' elements from yet more documents. An "IncludeDoc Chain" (i.e. Doc A is included in Doc B, Doc B is included in Doc C, Doc C is included in Doc D, etc.) has no enforced depth limit. In the case of recursive IncludeDocs (i.e. Doc A is included in Doc B, and Doc B is included in Doc A) a limit of eight inclusions will take effect to prevent infinite loops. Access permissions, 'LinkDoc' tags, 'Htmlentity' tags, etc. are all honored along the "IncludeDoc chain". For more info see KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content .

internal.gif Internal Content (<span class="kb-class-internal-site">...</span>)
Text visible on internal KB sites only

external.gif External Content (<span class="kb-class-external-site">...</span>)
Text visible on external KB sites only

ownersite.gif Owner site custom tag (<span class="kb-class-owner-group-site">...</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.

ownerinst.gif Owner institution tag (<span class="kb-class-owner-inst-site">...</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.


  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. 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.

  4. 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):

    Demonstration giraffe image

    This will require you to use the below controls:

    • Italic

    • Bold

    • Select Header

    • Hyperlink

    • 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).

    • Ordered List

    • Horizontal Rule

  5. 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):

    Giraffe guide annotated
  6. Once you are done making the changes necessary to reproduce the document, click Save Change.

  7. Scroll to the bottom of the document, make sure that In Progress is the selected status and click Submit.

See Also:

Keywords:kb knowledge base knowledge base KB training train title fields summary there design HTML XHTML WYSIWYG what you see is what you get you get see get you see controls buttons icons formatting format formating appear totop to top ToTop appearance align left center numbered ordered increase indent   Doc ID:23433
Owner:Leah S.Group:KB User's Guide
Created:2012-03-26 07:31 CSTUpdated:2022-05-03 09:45 CST
Sites:KB User's Guide, Social Science Computing Cooperative
Feedback:  3   0