The WYSIWYG Field - Documentation topics on: WYSIWYG,.

The WYSIWYG Field

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.

The body section of the Content Type displayed in the image below is a WYSIWYG field.

wysiwyg

Provided below is a list of the WYSIWYG buttons and a brief description of their functions:

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 View and edit html source
Create a bullet list Full screen edit mode
Indent right    
Indent left  


Paragraph and single line breaks
As you enter text, pressing <enter> starts a new paragraph, which leaves a blank line. For single line breaks, press <shift> + <enter>.


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

Link URL: For a web link, enter the full web address starting with http:// and for a email link enter mailto: followed by the email address.
Target: By default links will open in the same browser window. To have links open in a new browser window, select "Open link in new window" from the dropdown list.
Title: Enter the text your want to have appear when a user mouses over the link (ex. Click here for more information)



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

Image URL: enter the URL of the image (ex. http//www.yoursite.com/image.jpg)
Image Description: enter "alt text (optional).
Alignment:  select the image alignment from the dropdown list.
Dimensions: the width and height are automatically added for the image but the sizes can customized.
Border:  enter the size of the image border.
Vertical Space:  set the amount of space that appears above and below the image.
Horizontal Space:  set the amount of space that appears to the left and the right of the image.

Note: Right clicking on an image in the editor will display a menu with a link to the image properties.


Inserting tables
To insert a table, select the Table button. Here are some of the most common options used:

General Tab:
Columns and Rows: Enter the number of columns and rows to appear in the table.
Cellpadding and Cellspacing: Enter the amount of cellpadding and cellspacing to appear.
Alignment: Choose the table alignment from the dropdown options.
Border: Set the thickness of the table border. Default setting is 0 for no border.
Width and Height: Set the table height and width in pixels.
Advanced tab:
Border color: Set the table border color.
Background color: Set the table background color.



Viewing and editing html source
To view or edit the html of the content in the editor, select the "Edit HTML Source" button. Selecting the "Update" button will apply any changes made in the "HTML Source Editor" or clicking "Cancel" will close the window.


Full screen mode
Clicking the "Toggle full screen mode" will open the editor in a new window full screen size. To return the WYSIWYG editor to the original size, click the Full Screen button again.


Customize editor length
The length of the editor can be increased or decreased by dragging the lower right corner handle.


Undo and Redo
The standard keyboard shortcuts for undo and redo work for both the Windows and Mac:

for Windows users: for Mac users:
Undo CTRL+z Undo CMD+z
Redo CTRL+y Redo Shift+CMD+z