Topics Map > Documents Tab

KB User's Guide - Documents Tab - Guide to HTML Editor Buttons (Classic Editor)

This document is specific to the native HTML editor, which is only available on docs set to "HTML only mode". If you are using the standard editor (TinyMCE), please browse our other documentation for help.

Description of HTML editor buttons in KB Admin Tools

Click the buttons below for a description of what the button does. Click the browser BACK button to return to the top of the list.

H2 H3 H4 P Indent B S Red Sup Sub OL UL LI Center Right BR HR PRE < > Attachments
Image LinkDoc LinkNews IncludeDoc IncludeNews IntSite ExtSite OwnerSite OwnerInst HtmlEntity ToTop Anchor

  1. The H2 button inserts a heading tag of size 2.

    • Usage: <h2>Solution</h2>
    • Example:

      Heading 2

  2. The H3 button inserts a heading tag of size 3.

    • Usage: <h3>Solution</h3>
    • Example:

      Heading 3

  3. The H4 button inserts a heading tag of size 4.

    • Usage: <h4>Solution</h4>
    • Example:

      Heading 4

  4. The P button wraps the selected text in the <p> tag which is used to mark paragraphs. Space will automatically be inserted before and after a paragraph to separate one paragraph from another.

    • Usage: <p>This is a paragraph. </p>
    • Example:

      This is a paragraph. It can be long or short. If it's a long paragraph the text will wrap to the next line.

  5. The Indent button wraps the selected text in a <p> (paragraph) tag that has 40px of left padding.

    • Usage: <p style="padding-left: 40px">This is an indented paragraph.</p>
    • Example:

      This is an indented paragraph.

  6. The B button wraps the selected text (or inserts at the current cursor position) the <strong> tag for bolding the text.

    • Usage: <strong>Bolded Text</strong>
    • Example: Bolded Text

  7. The S button wraps the selected text in the <s> tag to draw a line through the text.

    • Usage: <s>Strikethrough Text</s>
    • Example: Strikethrough Text

  8. The Red button wraps the selected text (or inserts at the current cursor position) in a <span style="color: #c5050c;"> tag with CSS to color the text red.

    • Usage: <span style="color: #c5050c;">Roses are red.</span>
    • Example: Roses are red.

  9. The Sup button wraps the selected text in the <sup> tag which causes the text to appear in superscript.

    • Usage: X<sup>2</sup>
    • Example: X2

  10. The Sub button wraps the selected text in the <sub> tag which causes the text to appear in subscript.

    • Usage: X<sub>2</sub>
    • Example: X2

  11. The OL button inserts the basic framework for an ordered (aka numbered) list. Please note that it does not include the list items themselves—these need to be added separately with the LI button.

    • Usage: Usage: <ol><li>List item 1</li><li>List item 2</li></ol>
    • Example:
      1. List item 1
      2. List item 2

  12. The UL button inserts the basic framework for an unordered (aka bulleted) list (not including the list items inside of it). Please note that it does not include the list items themselves—these need to be added separately with the LI button.

    • Usage: <ul><li>List item 1</li><li>List item 2</li></ul>
    • Example:
      • List item 1
      • List item 2

  13. The LI button wraps the selected text in the list item tag. These can only be used inside of <ol></ol> or <ul></ul> tags.

    • Usage: <li>List item</li>
    • Example:
      • List item 1
      • List item 2

  14. The Center button wraps the selected text in the <div style="text-align: center;"> tag with CSS to center the text.

    • Usage: <div style="text-align: center;">Centered Text</u>
    • Example:
      Default Alignment
      Centered Text

  15. The BR button inserts a <br> tag at the current cursor location. This will insert a linebreak. The <br> tag can be used to place text on a new line without fully spacing it as with the <p> tag.

    • Usage: Line 1<br />Line 2
    • Example:

      Line 1
      Line 2

  16. The HR button inserts an <hr> tag at the current cursor location. This will insert a horizontal line or rule extending across the page.

    • Usage: Section One<hr>Section Two
    • Example:

      Section One

      Section Two

  17. The PRE button wraps the selected text in the <pre> tag which defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it presereves both spaces and line breaks. Useful tag for displaying computer code.

    • Usage: <pre>This is preformatted text. </pre>
    • Example: 
      This is preformatted text.

  18. The < > button inserts &lt; &gt; which are HTML Entities that will be interpreted by your browser as a pair of less than and greater than signs. Less than and greater than signs are just some of the characters that are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text because the browser will mix them with HTML tags. To actually display reserved characters (like less than and greater than), character entities must be used in the HTML source code.

    You can find more information on HTML Entities in HTML Entities Reference

    • Usage:
      5 &lt; 7
      10 &gt; 3
    • Example: 5 < 7
      10 > 3

  19. The Attachments button opens the document attachments folder. You can find more information on working in the attachments folder in KB User's Guide - Documents Tab - Managing Attachments.

  20. The Image button inserts the <img> tag at the current cursor location. Clicking the button opens a dialog window. Enter the source path and alternative text for the image you are adding in the dialog window.

    Note: Images are more commonly inserted by using the Attachments section of the Doc Editor. For more info see KB User's Guide - Documents Tab - Adding Images and Other Files to Your Documents

  21. The LinkDoc button inserts a custom tag which allows linking to other KB documents via document number. You can find more information on this feature in KB User's Guide - Documents Tab - Using the KB Link Doc Feature.

  22. The LinkNews button inserts a custom tag which allows linking to KB news items via news item ID number. You can find more information on this feature in KB User's Guide - Documents Tab - Using the KB Link Doc Feature.

  23. The IncludeDoc button wraps the selected number (a valid KB doc ID) in a div tag where class="kb-class-include-doc". This custom class will then embed the contents of that doc, or a specific section of that doc, into the host doc. Care must be taken if the doc is to be shared. Allows up to five layers of inclusion. See KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content for more information.

    • Usage: <div class="kb-class-include-doc">3469</div>

  24. The IncludeNews button wraps the selected number (a valid KB news item ID) in a div tag where class="kb-class-include-news". This custom class will then embed the contents of that news item into the host doc. Care must be taken if the news item is to be shared. Allows up to five layers of inclusion. See KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content for more information.

    • Usage: <div class="kb-class-include-news">12345</div>

  25. The IntSite button wraps the selected text in a div or span tag where class="kb-class-internal-site". Text wrapped in this custom class will only be visible on internal KB sites. More information on this feature can be found in KB Users Guide - Documents Tab - Content Restriction Tags.

    • Usage: <span class="kb-class-internal-site">Super secret stuff only visible on interal sites.</span>

  26. The ExtSite button wraps the selected text in a span tag where class="kb-class-external-site". Text wrapped in this custom class will only be visible on external KB sites. More information on this feature can be found in KB Users Guide - Documents Tab - Content Restriction Tags.

    • Usage: <span class="kb-class-external-site">Public information only visible on external sites.</span>

  27. The OwnerSite button wraps the selected text in a span tag where class="kb-class-owner-group-site". 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. More information on this feature can be found in KB Users Guide - Documents Tab - Content Restriction Tags.

    • Usage: <span class="kb-class-owner-group-site">Site specific information goes here.</span>

  28. The OwnerInst button wraps the selected text in a span tag where class="kb-class-owner-inst-site". 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. More information on this feature can be found in KB Users Guide - Documents Tab - Content Restriction Tags.

    • Usage: <span class="kb-class-owner-inst-site">Institution specific information goes here.</span>

  29. The HtmlEntity button wraps the selected text in a custom <htmlentity> tag. This custom tag preserves HTML markup in KB docs. This allows HTML type markup langueages to be embedded and displayed in KB documents more conveniently. Typically markup tags need to be manually escaped in order to display them in a client browser. Any text wrapped in the "htmlentity" tag will be displayed "as is" without browser interpretation and will also be rendered in monotype font.

    This can be helpful for those who use the KB to document code changes (e.g., javascripts), or publish instructions with HTML type markups.

    For more info on HTML Entities see HTML Entities Reference

    • Usage: <htlmentity>html code goes here.</htmlentity>
    • Example: 
      <p>There are <strong>visible</strong> HTML tags in this content</p>

  30. The ToTop button inserts a link that allows the reader to jump to the top of the page (to a permanent anchor placed at the top of all KB documents). The custom tag allows you to insert a link pointing to this anchor. When inserted, the link will read "To the top". You can, however, edit this as desired. Additionally, there is a custom div tag inserted around the link, which allows you to style the link as desired.

    • Usage: 
      <div class="to-kb-doc-top-anchor"><a href="#">To the top</a></div>
    • Example:
      To the top

  31. The Anchor button inserts a "jump target", aka an anchor. This allows linking to specific sections within a document.

    • Usage: <a id="anchor_name">This is an anchor</a>