Using the embedded text editor (TinyMCE): Methods and Tips - Support and Troubleshooting

Using the embedded text editor (TinyMCE): Methods and Tips Description The knowledge base provides a full-featured WYSIWYG (" What You See Is What You Get ") HTML editor, including an HTML code editor. This editor widget is called TinyMCE . 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 options. 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. Strikethrough Draws a line through the selected text, to invalidate it. 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. Table of Contents Generates a table of contents at the position of the cursor. This feature depends on the correct use of heading tags (H1, H2, H3, ...) in your document. See the next table with more information about paragraph and heading styles. 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. Paste as text Pastes the content of your clipboard, but removes the inline styles and formatting that may have been copied from the source (for example a website with HTML, or a Word document). Clear Formatting Removes the inline styles and formatting from the selected text, for example, after pasting text from a rich text editor like MS Word, or from a different website. Font selector Provides a selection of typographic fonts. Note that, by default, Verdana is selected. This does not mean that the content is using this font. 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. Note that, by default, 8pt is selected. This does not mean that the content is using this size. Avoid using this feature, the platform already provides a consistent styling according to our branding. Use Paragraph styles whenever possible. Find and replace Opens a dialog where you can find and replace text. Undo Undoes your latest editing. Redo Redoes the steps you have undone previously. Paragraph styles Use the drop-down selector labeled " Paragraph " to access the following styles:

Name Description Paragraph Defines a regular paragraph (HTML 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 See Table functions in TinyMCE for more information.

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. Note : For additional information, refer to Inserting tables: Methods and Tips . 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 the 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 the 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 target (same window, or new window or tab). Note : For additional information, refer to Inserting hyperlinks: Methods and Tips . Remove link Removes the current hyperlink, but leaves the link text. Source code Opens the HTML source code of the article in a separate modal window. 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. Note : For additional information, refer to Inserting images: Methods and Tips . 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. Note : For additional information, refer to Inserting embedded media: Methods and Tips . Insert/edit code sample Allows insertion of a piece of formatted code with syntax highlighting. This feature supports several languages, eg: HTML/XML, JavaScript, Java, CSS, Python, etc. 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.