Using the embedded text editor to create a knowledge article

[jaimehonaker]

The Knowledge Base provides a full‐featured WYSIWYG (What You See Is What You Get) HTML editor, including an HTML code editor. An HTML field allows users to define how field content is rendered. Use the HTML editor to create and modify the content of a knowledge article. Knowledge articles, service catalog item descriptions, release documentation, and HTML content blocks are common examples of HTML fields. 

The HTML editor is divided into two sections.

• Toolbar - Controls how text and images are displayed, import media, create hyperlinks and a variety of other tasks.
• Text Pane - Control text and image placement, and write the text content for the article.

Using the toolbar

The buttons on the toolbar allow you to edit every aspect of your document. In WYSIWYG mode, the HTML editor provides tools similar to a word processing program.

At the bottom of the editing window, the editor displays the path of HTML tags that are applied to the text at the cursor. The following sections list HTML tools available with the TinyMCE editor.

Formatting

Icon	Name	Description
	Bold	Applies bold formatting to the selected text or current word.
	Italic	Applies italics formatting to the selected text or current word.
	Underline	Applies underlining to the selected text or current word.
	Align Left	Applies left alignment to the current paragraph.
	Align Center	Applies center alignment to the current paragraph.
	Align Right	Applies right alignment to the current paragraph.
	Bullet list	Applies or removes unordered list tags for the selected paragraphs. Click the arrow next to the button to select a different bullet type. Use the "Increase indent" button or press Tab to create another level Use the "Decrease indent" button to return to the previous level You also press Shift+Tab for the same effect Press Shift+Enter to add another line in the same level: You can then add more content without using a new bullet item
	Numbered list	Applies or removes ordered list tags for the selected paragraphs. Click the arrow next to the button to select a different numbering type (alphabetical, Greek and Roman numerals, any of these in uppercase or lowercase, ...). See "Bullet list" for usage details.
	Increase indent	Applies indentation to the current or selected paragraphs.
	Decrease indent	Removes indentation from the current or selected paragraphs.
	Text Color	Applies font color to the current word or selected text. Click the button to use the current color, or click the arrow next to the button to view more colors. Click Custom... to view various color options and the hexadecimal codes. Avoid using this feature, the platform already provides a consistent styling according to our branding.
	Background Color	Applies background color to the current word or selected text. Click the button to use the current color, or click the arrow next to the button to view more colors. Click Custom... to view various color options and the hexadecimal codes. Avoid using this feature, the platform already provides a consistent styling according to our branding.
	Font selector	Provides a selection of typographic fonts. Avoid using this feature, the platform already provides a consistent styling according to our branding.
	Font size selector	Modifies the font size of the selected text. Avoid using this feature, the platform already provides a consistent styling according to our branding. Use Paragraph styles whenever possible.

Paragraph styles

Use the drop-down selector labeled "Paragraph" to access the following styles:

Name	Description
Paragraph	Defines a regular paragraph (HTML<p> tags)
Heading 1	Defines the first-level header. NOTE: Use this option sparingly, the title of a KB article is the highest header level. Any headings used in the content should start at the third level.
Heading 2	Defines a second-level header. NOTE: Use this option sparingly, the section titles of a KB article are level 3 headers. Any headings used in the content should start at the third level.
Heading 3	Defines a third level header; use this level and lower for the sections of your article.
Heading 4 Heading 5 Heading 6	Defines fourth, fifth, and sixth level headers, respectively. NOTE: If you need this level or lower, perhaps you should think of spreading the content of your article over several shorter ones
Preformatted	Highlights code blocks in a monospace font with additional styling (background color, etc.): if (this) { do.that(); return; }

Table Tools

Icon	Name	Description
	Table	Opens a submenu where you can create and edit a table. The first menu option, Table, shows a grid where you can define the number of rows and columns by moving your mouse cursor.
Submenus:	Table properties	Defines global properties for the table: height, width, borders, padding, spacing, etc.
	Delete table	Deletes the table where your cursor is focused.
	Cell > Cell properties	Lets you specify properties of the current table cell; width, height, type, borders, etc.
	Cell > Merge cells	Merges the selected cells in the table. You must have more than one cell selected.
	Cell > Split cell	Splits any previously merged cells in the selected table cells.
	Row > Insert row before	Adds a row below the current row in a table.
	Row > Insert row after	Adds a row below the current row in a table.
	Row > Delete row	Deletes the current row in a table.
	Row > Row properties	Lets you specify properties of the current table row; height, type, etc.
	Row > Cut row	Copies the content of the row to the clipboard and deletes it from the current row.
	Row > Copy row	Copies the content of the row to the clipboard.
	Row > Paste row before	Creates a new row above the current one and pastes the content of the clipboard
	Row > Paste row after	Creates a new row underneath the current one and pastes the content of the clipboard
	Column > Insert column before	Adds a column to the left of the current column in a table.
	Column > Insert column after	Adds a column to the right of the current column in a table.
	Column > Delete Column	Deletes the current column in a table.

Extended Tools

Icon	Name	Description
	Insert/edit link	Configures a link for the selected text. Define the link URL, title (additional information that appears in the tooltip), and the target (same window or new window or tab).
	Remove link	Removes the current hyperlink.
	Source code	Opens HTML source code in a separate window.
	Horizontal line	Inserts a horizontal line at the current location.
	Insert/edit image	Inserts an image from the image library or an attachment. You can also add images to the image library with this feature.
	Insert/edit video	Embeds a video from the video library or an attachment. You can also add videos to the video library with this feature.
	Preview	Opens a preview of the HTML field in a separate window without saving changes.
	Toggle Full-Screen Mode	Expand the HTML editor to occupy the full browser window. When in full-screen mode, click this icon again to return to windowed mode. This feature is not available for Internet Explorer.