Content Editor Usage Guide

This Content Editor Tool is very good at translating text to HTML code; however in order to do this, certain functions may behave sightly different than in other tools. The most noticeable difference is that a lot of content is handled as paragraphs or blocks of text. For instance, when you start typing you are essentially starting a new paragraph, and the tool expects you to keep writing until you finish that paragraph. Pressing the ENTER key ends the paragraph, and prepares a new one. This can appear as double-spacing but it really is not. If you need the appearance of single spacing ( line break ) you can hold the SHIFT key and then press ENTER.

Keyboard Commands 

ENTER : end paragraph, prepare to start new paragraph
SHIFT + ENTER : single space line break. (stays within paragraph)
CTRL + C : copy selected text
CTRL + V : paste selected text
CTRL + Z : undo
CTRL + Y : redo
 

Top

Tool Buttons - top row, left to right

Source : switches between design view and HTML source code view
Cut : deletes and stores selected text in memory. Select text then click this button.
Copy : stores selected text in memory. Select text then click this button.
Paste : puts any text saved into memory back onto page. Place typing-cursor where you would like text to appear, then click this button.
Paste as plain text : puts any text saved into memory back onto page, minus formatting such as bold, italic, colors, font changes etc. Place typing-cursor where you would like text to appear, then click this button.

Undo : removes last change
Redo : reapplys any changes removed by Undo

Bold : make text thicker. Select text then click this button.
Italic : make text slightly slanted. Select text then click this button.
Underline : underline text. Select text then click this button.
Strike through : cross text out.  Select text then click this button.

Subscript : turn text into _subscript Select text then click this button.
Superscript : turn text into ^superscript Select text then click this button.

Image : add an image to the page. SEE BELOW SECTION - ADDING IMAGES
Table : *special block* : creates a HTML table inside the document.  SEE BELOW SECTION - ADDING TABLES
Find : search for text within the document or perform a find and replace.    SEE BELOW SECTION - FIND & REPLACE 
Horizontal Rule : *block* : end the current paragraph and create a thick line across the page. Place typing-cursor where you would like to insert Horizontal Rule then click this button.
Insert Special Character : this will place a non-standard keyboard character wherever the typing-cursor is positioned. Special Characters include § ™ æ € ½ Click this button, then select the character you would like to add.
Remove Format : remove any formatting preformed on text, such as bold, italic, colors, font changes etc. Select text then click this button.

Link : make a link out of selected text. SEE BELOW SECTION - ADDING LINKS
Unlink : remove an added link. Place typing-cursor inside link, then click this button.
Anchor : anchors let you create links to specific positions of webpages. Place the typing cursor wherever you would like to link to. Click the Anchor button and in the dialog box give the anchor a name. Click ok to create the anchor. ( Use the link button to create the corresponding link to this anchor position )
 

Tool Buttons - bottom row, left to right

Format : *block* : change the text from a paragraph format to a different predefined HTML format such as a Heading (H1, H2, H3) or Address. Place typing-cursor inside a paragraph and then select the desired format from the dropdown.
Font : change the font of selected text. Select text then choose desired font from this dropdown menu.
Size : make text bigger or smaller. Select text then choose desired font size from this dropdown menu.

Text Color : change color of selected text. Select text then choose a color from the dropdown 
Background Color : change the color of background directly behind selected text. Select text then choose a color from the dropdown.
( Both these options also have a "More Colors" button under the common swatches, where you can select from a wider range of colors. )

Insert//Remove Numbered List : *block* : creates a list item out of the entire paragraph using numbers. Place typing-cursor inside of a paragraph, then click this button.
( Items will be numbered successively )
Insert/Remove Bulleted List : *block* : create a list item out of the entire paragraph using bullets. Place typing-cursor inside of a paragraph, then click this button.
( Each line of text you would like to turn into a List must start out as it's own paragraph. Which means it must be separated by presses of the ENTER key. To end the List press the ENTER key twice )
( To create lists inside of lists, create a numbered or bulleted list then use the Increase Indent button to  turn it into a sub-list. )
( Right click on a list to change

Decrease Indent : *block* : decrease the indentation of the entire paragraph. Place typing-cursor inside of a paragraph you have previously indented, then click this button.
Increase Indent : *block* : indent the entire paragraph. Place typing-cursor inside of a paragraph, then click this button.
( To indent just a single line within a paragraph, press SHIFT + ENTER on keyboard to create a line break, and then hit the spacebar multiple times to indent the line. )
Block Quote : *block* : indent the entire paragraph and declare it a quote internally. Place typing-cursor inside of a paragraph, then click this button.

Left Align : *block* : aligns the entire paragraph to rest along the left edge of the content container. Left click anywhere inside of a paragraph, then click this button.
Center Align : *block* : aligns the entire paragraph to be centered in the content container. Left click anywhere inside of a paragraph, then click this button.
Right Align : *block* : aligns the entire paragraph to rest along the right edge of the content container. Left click anywhere inside of a paragraph, then click this button.
Block Justify : *block* : aligns the entire paragraph to be spaced equally across the content container. Left click anywhere inside of a paragraph, then click this button.

Show Blocks : creates a diagram view of all Block elements such as Paragraphs, Headings, Divs etc.
( Can be very helpful in diagnosing odd behavior and understanding the structure of the document )
Maximize : expands the content editor area to match the height and width of the browser window
 

Adding Links 

Select text you would like to make into a link, then click the Link button ( If you do not select text, the Url will be added to the page and used as the link text ) A dialog box will come up.

Link Type : URL

The following options are for when Link Type is set to URL

• Link Info tab

  • Protocol : method of connection to the site. ( LEAVE AS HTTP:// )
  • URL : the URL location you would like the link to go to. Paste the desired link URL here. Format will be auto corrected.

• Target tab

  • If you would like the link to open in a new window when clicked, set the Target to : New Window (_blank)

• Advanced tab

  • Advisory Title : set the title attribute for the link.

Link Type : Link to Anchor in the Text

The following options are for when Link Type is set to Link to anchor in the text

• Link Info Tab

  • By Anchor Name : select the name of an anchor you have created earlier to add a link to it.
    After you have made anchors by clicking the Anchor button, you will see a dropdown menu populated with any anchors you have created. Selecting one will create a link to a different section of the same page. ( you can see this in use for the Guide Navigation in this document. )

Link Type : E-mail

The following options are for when Link Type is set to E-mail

• Link Info Tab

  • E-Mail Address : the email address you would like email sent to
  • Message Subject : default text for the subject field of the email
  • Message Body : default text for the body field of the email

Adding Images

Place typing-cursor where you would like image to appear, then click "Image" button. A dialog box pops up.

Image dialog box options:

URL : Put the url address of the image here. The image would already have to have been uploaded to a folder on our server via FTP. We are working on adding image upload functionality.
Alternative Text : This is text that will show up if your image cannot be displayed.
Width and Height are auto populated with the image size. You can overwrite these values by changing these numbers. If you have made a mistake you can always click the clockwise-arrow icon to revert to original image size. ( If you would like to make sure the image proportions are maintained when resizing, make sure the little lock icon is closed. )
Border : the thickness of a border around the image. Limited to black
H Space : horizontal spacing between the image and any text around it. Numbers such as 2, 5, 10, 25 will appear to push things away from the image on a horizontal plane.
V Space : vertical spacing between the image and any text around it. Numbers such as 2, 5, 10, 25 will appear to push things away from the image on a vertical plane.
Align : setting this to left or right will align the image against the left or right document edge respectively, and any surrounding text will flow around it.  ( The default value of  "" will mean that text will not flow around the image. )
Preview : This shows a preview of what your image will look like, as well as how it will be aligned and how text will flow around it. ( If your image is very large, this preview box may not be of much use )

The "Link" Tab

Still inside the Image Dialog box you will notice three tabs at the top, Image Info, Link, and Advanced. Advanced doesn't provide too many commonly used features so I will ignore it. The Link tab however would allow you to make the image act as a link when clicked. Enter the Url you would like to be directed to in the Url field. By default the image will open in the same window as the site your were on, if you would like it to open in a new window when clicked, set the Target to : New Window (_blank)
( As always make sure to test your links to verify they take you exactly where you wanted to go. )

• To remove an image, left click on it and hit the DELETE key on the keyboard.
• Right clicking an image displays an "Image Properties" button which would take you back the the settings dialog for that image.
• To resize an image you can left click it which will make 8 small resizing squares visible around the image. Dragging the squares on the corners of the image will resize the image while preserving it's width to height ratio. Dragging the center left right top or bottom squares will stretch the image in that direction.

Adding Tables

Place typing-cursor where you would like table to appear, then click "Table" button. A dialog box pops up.   

Table Properties  

Here you can input how many Rows and Columns you would like your table to have.  ( You can create a simple text box by making a table with only 1 row and 1 column. ) If desired you may set a specific width and height for your table.

Headers : specify which columns or rows ( or both) are being used as headers. Defining headers will make any text inside that row or column bold and centered.
Border size : the thickness of the table border in pixels ( Setting a border of 0 will create a borderless table once you update the page. )
Alignment : align your table against the left, right or center of the content area. If left or right are selected then the table will allow text and images to flow around it.
Cell spacing : defines the space between cells
Cell padding : defines the interior space in cells
Caption : text to appear above the table
Summary : overall description of the table contents. Does not appear on the page is only used internally. Not at all necessary to fill out.

Once your table is created you can left click inside any of the cells and start typing to enter text. ( The same paragraph rules apply inside table cells as elsewhere in the editor ) You can resize the table easily by dragging on the 8 small boxes that appear either around the table or directly to the left of the table when the table is clicked on.

Cell Properties

Right clicking on a cell will show you many options. This is one way to return to the original "Table Properties" dialog. You will also see a link called Cell clicking on this displays a dropdown menu with additional cell specific options. From this dropdown, select Cell Properties. I will only go over the most relevant options.

wordwrap : if set to no it will override the width of the cell / table and do everything to not push a sentence onto the next line.
horizontal alignment : aligns text inside the cell horizontally
vertical alignment : aligns text inside the cell vertically
background color : set a background color for the cell
 

Find & Replace

Find

Click the Find button. A dialog box opens. Type the word you are looking for and press find. If the text is found it will become highlighted ( You may have to grab the top of the dialog box and move it out of the way to see the content. )    If the search is unsuccessful an alert will pop up. Clicking Find repeatedly will cycle through all found text instances.

Replace

Click the Find button. When the dialog box opens click the "Replace" tab near the top of the box. Enter text to find as well as text to replace it with, then click Replace to perform the first replace. Pressing Replace repeatedly will cycle through and replace all instances of the text specified in the Find field. Pressing Replace All  will go through and replace all instances in one shot.

Mouse Commands

Right Click

You may have noticed that right clicking anywhere inside the content editor brings up a custom right click menu. In fact depending on the element (paragraph, table, image etc) you click on, different options will appear. For instance right clicking on a Table,  Image or Link will allow you to jump back into the Properties dialog boxes you originally used to create these elements. For Tables you also have a whole host of Cell, Row and Column specific controls as well as a button to delete the Table.

Spell check

This content editor also comes with a basic spell checker. When a word is not recognized the tool will put a red squiggly line under it. Right clicking on a word with this squiggly line will show some potential spelling corrections; clicking any of these will replace the incorrectly spelled word with the one of your choosing.  

General Tips

• click update page often!!!! This saves your work.
• make sure to test any links you create to verify they are pointing to the desired location and are functioning properly.
• Use single cell Tables as text boxes.
• right clicking on an element reveals more options specific to the element
• what you see in the tool is only a rough estimation of how things will look like on the page, so avoid trying to create pixel perfect layouts and content entries.
• Pasting from other programs is discouraged because the code may not follow the block paragraph based structure that this editor is based on. It may cause odd behavior. It is recommended to do as much work as you can in this tool, and if you must Paste from another program use the Paste as Plain Text button to clear all the formatting.