From SNCWiki

Revision as of 19:30, 17 March 2010

Overview

Some fields within forms accept HTML entry, enabling the use of any HTML code to format or style the content of the field's input. Some common HTML fields include knowledge base articles, the Service Catalog item descriptions, release documentation fields, and HTML content blocks. These HTML fields can be specified to appear on any form, however, by the administrator.

All HTML fields use the same HTML editor, providing both a What You See Is What You Get (WYSIWYG) and HTML code inputs. It is important to note, however, that there are minor differences in functionality between different browsers.

Administrators can customize some of the functionality of HTML Fields. For more information, see Modifying HTML Fields.

Note: Styles declared by HTML fields may be overriden by CSS declarations in the themes.css file that styles the entire instance. If a style is not being displayed, use a web development tool (e.g. Firebug for Firefox) to see what attributes are overriding the style.

Streamlined HTML Editor

The controls in the HTML editor were streamlined for the Winter 2010 Stable 1 release. Extraneous controls were removed from the interface, and new icons were created for existing controls. The following controls were removed in favor of commonly used key and menu commands:

• Cut
• Copy
• Paste
• Undo/Redo

HTML Editor in WYSIWYG Mode

The HTML editor provides a number of controls in WYSIWYG mode to alter the text, similar to those found in any word processing program, including:

• Fonts: Includes a number of commonly-used fonts
• Font sizing
• Styles: Includes a number of headings, Normal, Address, and Formatted. Note that these apply to an entire line, not parts of a line.
• Bold, italic, and underline
• Spell check
• Alignment
• Numbering and bulleting
• Indentation
• Text and background color pickers: These open a color-picker pop-up window, which display the colors in a grid and display the hexadecimal of any color when hovered over.
• Horizontal Rule
• Insert/Modify Link: Displays the Insert/Modify Link pop-up window. Here, a link can be configured to point at either an attachment, or an external URL. The link can also be given a tooltip and a target (new window, same frame, etc.) Since Spring 2009 Stable 2, the same function appears as an in-window dialog.
• Insert/Modify Image: Opens a pop-up window to insert an image currently in the image library or already uploaded as an attachment. Since Spring 2009 Stable 2, this link opens an in-window dialog box to accomplish this. Users can also add images to the image library from this dialog box. See HTML Field Image Picker for details.
• Insert/Modify Video: Opens an in-window dialog box to embed a video currently in the video library or already uploaded as an attachment. This feature was introduced in the Winter 2010 Stable 2 release. Users can also add videos to the video library from this dialog box. See Embedding Video in HTML Fields for details.
• Insert Table, which displays a pop-up window to define the table, including rows, columns, width, layout, and spacing.
• Toggle HTML Source ( ), which enters the HTML edit mode.

The WYSIWYG editor also displays a path at the bottom, which shows what HTML tags are being applied to the text where the cursor is currently in the text. Clicking on any tag in the path will highlight all of the text affected by the path.

HTML Editor in HTML Source Mode

Click the Toggle HTML Source icon ( ) to display the HTML code. Text and code can be altered directly, using standard HTML mark-up. All WYSIWYG controls, although visible, are disabled in HTML code, except for the Toggle HTML Source, which will return to the WYSIWYG mode if selected.