WYSIWYG Editor

The cross browser WYSIWYG rich text editor supports multiple web browser for both Windows and Mac OS X. With the WYSIWYG editor enabled for either the summary, content, or additional article fields, you can format text similar to using a word processor and without knowing any HTML.

Your editing options include bold, italic, underline, align left/center/right, numbered lists, bulleted lists, indent right/left, text color, text highlight color, insert horizontal rule, add link, add email link, add image link, and view html source.

Supported Browsers:

for Windows users: for Mac OS X users:
  • Internet Explorer 5.5+
  • Firefox 1.0+
  • Mozilla 1.7+
  • Netscape 7.1+

  • Firefox 1.0+
  • Mozilla 1.7+
  • Netscape 7.1+

Note: Browsers not supported will display a regular textarea that can not be edited.

Editor Buttons

Change text to bold Choose font color
Change text to italic Choose background color
Underline text Insert horizontal rule
Align left Insert link
Align center Insert image
Align right Insert table
Create a numbered list Edit selected table or cell
Create a bullet list View and edit html source
Indent right Full screen edit mode
Indent left Paste from Word


Entering content

The WYSWYG editor allows you to create content with word processor-like formatting. Type your content directly in, then highlight the text you wish to style (make bold, italic or change the text color for example). Copying and pasting content into the editor from other sources works as well but note that the content may require some additional styling and formatting after being added. Also, pasting in content that was copied from Word or email software can sometimes add extra line spaces.

There is some browser specific differences with the editor to note. Using Internet Explorer 5.5+ (Windows), as you enter text, pressing <enter> starts a new paragraph, which leaves a blank line. For single line breaks, press <shift> + <enter>. With all other supported browsers (Mozilla, Firefox and Netscape), pressing <enter> adds a single line break. To start a new paragraph, press <enter> twice.


Inserting web page links and email links

You can add either web page links or email links within your content using the Hyperlink button. Here are the options available:

  • Source dropdown:  choose the type of link, for example, http:// for a web link or mailto: for an email link. In the following field, enter the rest of the link URL or email address.
  • Target dropdown:  by default links will open in the same browser window. To have links open in a new browser window, select "Blank" from the Target dropdown list.
  • Text field:  enter text your want to have appear when a user mouses over the link (ex. Click here for more information)

Note: Advanced users can add anchor links within the content that will automatically appear in the Bookmark dropdown. To do this, select the "View Source" button and add an anchor tag within the content. Ex.<a name="anchor link name">


Inserting images

To insert online images into your content, use the Image button. Here are the options available:

  • Source field:  enter the URL of the image (ex. http://www.yoursite.com/image.jpg)
  • Title field:  enter "alt" text (optional)
  • Alignment dropdown:  use to choose the alignment of your image. The example at the bottom of the Image popup shows you how your choice will look.
  • Additional image options that can be set include: border, image height and width as well as spacing.

Note: To learn about uploading images to include in your content see the Uploading Images and Image Placeholders sections of the documentation.


Inserting tables

There are two ways to create tables after selecting the Table button:

  1. Mouse over the table grid to choose the number of columns and rows.
  2. Or choose the "Advanced Table Insert" link at the bottom of the table grid to open the Insert Table popup window.

Creating a table using the table grid creates a table with no borders. Borders can then be added to the table by selecting the table, then clicking the Edit Table/Cell button, and choosing the Edit Table option.

Using the "Advanced Table Insert" option to create a table includes the option to select borders and column and row spans when creating the table.


Editing tables and cells

After selecting the table to edit, the three main table and cells editing option categories are Table Size, Edit Table and Edit Cell.

  • Table Size: This option allows you to insert rows and columns, increase/decrease row spans and col spans as well as delete rows and columns.
  • Edit Table:
    • AutoFit: choose width and height of table by auto fitting to content, window or by selecting size by pixels or percent.
    • Properties: choose table alignment, margins, borders, cell spacing and padding.
    • Style: preview the CSS style that has been created or edit CSS directly.
  • Edit Cell:
    • AutoFit: choose width and height of a cell by auto fitting to content or by selecting size by pixels or percent.
    • Properties: choose text alignment, borders, cell spacing and padding.
    • Style: preview the CSS style that has been created or edit CSS directly.

     

Viewing and editing html source

To enter HTML directly into the WYSIWYG editor , select the Edit/View Source button "<>", then paste the HTML code. Next click the "apply" button to see the results in the editor. To preview the results on your webpage before publishing, click the "Preview without publishing" button. This will open a new window with the full article publish preview results.


Full screen edit mode

Full screen edit mode allows you to expand the WYSIWYG editor to the full size of your browser window. To return the WYSIWYG editor to the original size, click the Full Screen button again.


Paste from Word

Use the Paste from Word button to paste in article content that was written in Word. This will prevent the extra code, characters and formatting that Word adds.