How to use the Article Editor

 

Article Editor

This rich text editor (WYSWYG editor) allows you to 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.

 

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 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 will add unnecessary HTML code that may may make it difficult to get the look you want including extra line spaces.   Recommended: to paste content from Word, it is recommended to use the editor's Word Paste button which will provide the cleanest HTML code.   Some of the formatting may be lost but can be easily added to the content once it is within the editor.

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.

 

Return to Submit Article page.

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

There are several methods to insert images into your content.  The editor will accept file sizes over 1MB and resolutions up to 300 pixels per inch.  However these large files will take longer to upload.   Once an image is uploaded, the editor will limit the image size to 350 pixels by 350 pixels.   So for general image uploads, it is recommended to first make the image resolution to be 72 pixels per inch, maximum image size of 400 pixels in width and 400 pixels in height.  If you can not modify the images to meet this critieria, the editor will do this for you but you will get better results if the uploaded images meet the requirements.  Formats accepted are gif, jpg, jpeg, and png.

 

Upload one or more images with the Upload function at the bottom of the editor page.  Once the images are uploaded, you can can place the images into the content at the exact position wanted by using one of two methods.   First method is to select, copy and paste the uploaded image directly into the content and the second method is to select the placeholder, ***imageX***, copy and then paste the placeholder in the content where the image should be placed.   NOTE:  This image placement can take up to a couple of minutes so please wait until the placement is complete before continuing.

 

The first method using the image copy and paste provides a smaller image which can be stretched (this can distort the image if not done carefully) and can be modified using the Image button for modifications. 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.

The second method using the copy and paste of the placeholder will place the exact image you uploaded, up to the max image size.

 

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 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 editor to the full size of your browser window. To return the editor to the original size, click the Full Screen button again.   This is very helpful if you have several large images.

 

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.

 

Pre-view the article and make any necessary changes.

 

Happy Writing! 

 

Return to Submit Article page.