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.

Background

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.

DesignViewButtons Header Font Font Size Font Color Background Color Bold Italic Underline Strikethrough Superscript Subscript Special Characters Horizontal Rule Horizontal Rule CSS Text CSS Remove CSS Undo Redo Remove Format Toggle Full Screen Link Unlink Name Anchor Mail Link Insert Image Image Properties Unordered List Ordered List Unordered Checklist Ordered Checklist Indent Outdent Justify Left Justify Center Justify Right Justify Full Table Insert Row Above Insert Row Below Insert Column Left Insert Column Right Remove Row Remove Column To the top anchor Link Doc Include Doc Internal Content External Content Owner Content Institution Content

select_header.gif Select header. Highlighted text will be formatted with selected header format.

select_font.gif Select font style. Highlighted text will be formatted with selected font style.

select_size.gif Select font size. Highlighted text will be formatted with the selected font size.

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

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

bold.gifMarks the highlighted text as bold.

italic.gifItalicize the highlighted text

underline.gifUnderline the highlighted text

strikethrough.gifDraw a line through the middle of the highlighted text.

superscript.gifCreate small letters above the line of text.

subscript.gifCreate small letters below the text baseline.

specialchar.gifInsert special characters, for example ©,†,«.

inserthorizontalrule.gifInsert horizontal rule.

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

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

remove_css.gifRemoves CSS from where cursor is placed or from highlighted text.

undo.gifUndo typing.

redo.gifRedo typing.

removeformat.gifRemove formatting.

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

link.gifInsert Hyperlink.

unlink.gifRemove Hyperlink from URL.

anchor.gifInsert anchor tag.

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

insertimage.gifPopup will display to enter path to saved image. This tag is rarely used. For more info see KB User's Guide - Documents Tab - Embedding Web Images

editimage.gif Popup will display to configure attributes of Image. This tag is rarely used. For more info see KB User's Guide - Documents Tab - Embedding Web Images

insertunorderedlist.gifInsert bulleted (unordered) list.

insertorderedlist.gifInsert numbered (ordered) list

indent.gifIncrease the indent level of the paragraph.

outdent.gifDecrease the indent level of the paragraph.

justifyleft.gifAlign text to the left.

justifycenter.gifCenter text.

justifyright.gifAlign text to the right.

justifyfull.gifAlign text along both left and right margins.

inserttable.gifInsert Table

insertrowabove.gifInsert row above.

insertrowbelow.gifInsert row below.

insertcolumnleft.gifInsert column to the left.

insertcolumnright.gifInsert column to the right.

deleterow.gifDelete row.

deletecolumn.gifDelete 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.gifLinkdoc (<a class="linkdoc">...</a>): Insert link to KB Doc. Allows up to six layers of inclusion.   

includedoc.gifIncludedoc (<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 .

internal.gifInternal (<span class="internal">...</span>): Text visible on internal KB sites only

external.gifExternal (<span class="external">...</span>):Text visible on external KB sites only

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

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

Exercise

  1. If you are not already logged in, log into the KB Admin Tools: Shibboleth Login (most institutions) or Active Directory Login (CVTC, Parkland, SIUE, UMMC)

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

    giraffe_guide_thumb.png

    This will require you to use the below controls:

    • Italic

    • Bold

    • Underline

    • 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_thumb.png
  6. Once you are done making the changes necessary to reproduce the document, click Save Changes.

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




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:Teresa A.Group:KB User's Guide
Created:2012-03-26 07:31 CSTUpdated:2016-10-31 10:59 CST
Sites:KB User's Guide
Feedback:  0   0