Close Window
 YourCityGuide.net WYSIWYG Editor and commands

Below you will find 19 Flash Video Tutorials to help you with the major functions of the WYSIWYG Editor.  In addition, we have compiled a list of the WYSIWYG Editor buttons and explanations of each.
 

 

 
Fullscreen Mode
  To expand the active window to a full screen click on the 'Fullscreen Mode' Icon. It does not open a new window, instead it will resize to fit the browser screen. Concurrent clicks on this icon will toggle this feature on and off.
Cut (Ctrl+X)
  To cut a portion of the document, highlight the desired portion and click the 'Cut' icon (keyboard shortcut - CTRL+X). 

Due to internal security limitations in the browser, this icon is not available in Netscape.
Copy (Ctrl+C)
  To copy a portion of the document, highlight the desired portion and click the 'Copy' icon (keyboard shortcut - CTRL+C).

Due to internal security limitations in the browser, this icon is not available in Netscape.
Paste (Ctrl+V)
  To paste a portion that has already been cut (or copied), click where you want to place the desired portion on the page and click the 'Paste' icon (keyboard shortcut - CTRL+V).

To paste from Microsoft Word, click on the icon to the right of  the Paste Icon.

Due to internal security limitations in the browser, this icon is not available in Netscape.
Paste from Microsoft Word (Ctrl + D)
  To Paste from Microsoft Word: Copy your desired text from Microsoft Word and click the 'Paste from Word'  icon. Paste into the box that opens. 

This tool will strip all Word formatting tags from the content and convert it to HTML friendly code. You can then use the editors tools to format the content to display the way you desire without all the ill effects that Word formatting would create. The result is a cleaner and more accurate code, that is more compliant to the current HTML standards.

Paste Text
  This option will allow you to paste anything copied to the clipboard into plain text. If the content you pasted contained images, tables, or other html other than Text, it will automatically remove them and simply place just the text portions into your editor. This is handy in the event you are not sure what types of harmful formats could be applied to the code you copied.
Search, Find and Replace
  To find and replace words or phrases within the text:
Select the search and replace feature. Enter the word or phrase you wish to replace and type it in the 'Find what' field

Select the new word or phrase you wish to replace the searched text with in the 'Replace with' field.

You can choose to 'find next' which allows you to manually replace instances of the searched text, or you can choose 'replace all' which allows you to replace all instances of the selected text.

Selecting the optional 'Match Case' tab allows you to search for a word or phrase with exactly the same upper or lower-case spelling of the word or phrase entered in 'Find What'. Not selecting this option means that a word entered in the 'Find what' field with upper case characters will return a search of upper and lower case matches of the same word.

Selecting the optional 'Match whole word only' tab allows the search to only display the words that are an exact match of the word or phrase entered in the 'Find What' field.
Click here for tutorial.
Undo (Ctrl+Z)
  To undo the last change, click the 'Undo' icon (keyboard shortcut - CTRL+Z). Each consecutive click will undo the previous change to the document.
Redo (Ctrl+Y)
  To redo the last change, click the 'Redo' icon (keyboard shortcut - CTRL+Y). Each consecutive click will repeat the last change to the document.
Check Spelling (F7)
  Spell Check will require a download from ieSpell from: www.iespell.com (which is only supported with IE). Though the download is free, it's commercial use requires a license fee (http://www.iespell.com/pricing.htm) which we strongly recommend you consider purchasing a license. The program itself seems very good, though, and certainly better than nothing. 

As this is a third party software, support for its functionality cannot be handled by our staff.

To check spelling, select the text you would like to spell check (if you do not select the text, then your whole document will be checked)

Click on the spell checker icon or right click on the mouse and scroll down to 'Check spelling'. You will be taken to the first incorrectly spelled word. You can then choose to

- Change the incorrectly spelled word with the suggested words provided
- Ignore the incorrectly spelled word (i.e. not make any changes to it)

To check spelling of a single word, highlight the word and right click on the mouse to get a selection of suggested replacements. To replace the miss-spelt word with one of the suggested words, simple select one of the replacements.

Remove Text Formatting
  This command allows you to select a specific portion of text and remove any of the formatting which it contains. To remove any text formatting select the desired portion of text and Click the 'Remove Text Formatting' button.
Bold (Ctrl+B)
  To bold text, select the desired portion of text and click the 'Bold' icon (keyboard shortcut - CTRL+B). Each consecutive click will toggle this function on and off.
Underline (Ctrl+U)
  To underline text, select the desired portion of text and click the 'Underline' icon (keyboard shortcut - CTRL+U). Each consecutive click will toggle this function on and off.
Italic (Ctrl+I)
  To convert text to italic, select the desired portion of text and click the 'Italic' icon (keyboard shortcut - CTRL+I). Each consecutive click will toggle this function on and off.
Strikethrough
  To format text as strike through Select the text you want formatted by highlighting it and select the 'Strike through' icon. Each consecutive click will toggle this feature on and off
Insert Number List
  To start a numbered text list, click the 'Insert Numbered List' icon. If text has already been selected, the selection will be converted to a numbered list. Each consecutive click will toggle this function on and off.
Insert Bullet List
  To start a bullet text list, click the 'Insert Bullet List' icon. If text has already been selected, the selection will be converted to a bullet list. Each consecutive click will toggle this function on and off.
Decrease Indent
  To decrease indent of a paragraph, click the 'Decrease Indent' icon. Each consecutive click will move text further to the left.
Increase Indent
  To increase indent of a paragraph, click the 'Increase Indent' icon. Each consecutive click will move text further to the right.
Superscript
  To convert text to superscript (vertically aligned higher): Select the desired portion of text and click the 'Superscript' icon. Each consecutive click will toggle this function on and off.
Subscript
  To convert text to subscript (vertically aligned lower): Select the desired portion of text and click the 'Subscript' icon. Each consecutive click will toggle this function on and off.
Align Left
  To align to the left, make a selection in the document and click the 'Align Left' icon.
Align Center
  To align to the center, make a selection in the document and click the 'Align Center' icon.
Align Right
  To align to the right, make a selection in the document and click the 'Align Right' icon.
Justify
  To justify a paragraph or text, make a selection in the document and click the 'Justify' icon.
Insert Horizontal Line
  To insert a horizontal line, select the location to insert the line and click the 'Insert Horizontal Line' icon.
Create or Modify Link
  To create a hyperlink, select the text or image to create the link on, then click the 'Create or Modify Link' icon. if applicable, the popup window will contain existing link information. You can type the full URL of the page you want to link to in the URL text box. You can also enter the target window information (optional) and an anchor name (if linking to an anchor - optional).

For quick access to links, you can choose to insert a pre-defined link from the 'Pre-defined links' dropdown list.

When finished, click the 'Insert Link' button to insert the hyperlink you just created, or click 'Remove Link' to remove an existing link. Clicking 'Cancel' will close the window and take you back to the editor.  Click here for tutorial.
Insert / Modify Bookmark - Anchor
  To insert an anchor, select a desired spot on the web page you are editing and click the 'Bookmark' icon. In the dialogue box, type the name for the bookmark (anchor).

When finished, click the 'OK' button to insert the bookmark , or 'Cancel' to close the box.

To modify an anchor select the anchor (displayed as an anchor icon when guidelines are switched on) and click the 'Insert / Modify Anchor' icon. Make your changes and hit the 'OK' button or click 'Cancel' to close the window. Click here for tutorial.
Font
  To change the font of text, select the desired portion of text and click the 'Font' drop-down menu.

Select the desired font (choose from Default - Times New Roman, Arial, Verdana, Tahoma, Courier New or Georgia).
Font Size
  To change the size of text, select the desired portion of text and click the 'Size' drop-down menu.

Select the desired size (text size 1-7).
Paragraph
  To change the format of text, select the desired portion of text and click the 'Format' drop-down menu.

Select the desired format (choose from Normal, Superscript, Subscript and H1-H6).
Styles & Formatting
  To change the style of text, images, form objects, tables, table cells etc select the desired element and click the 'Style' drop-down menu, which will display all styles defined in the style-sheet.

Select the desired style from the menu.

Note: this function will not work if there is no style-sheet applied to the page.
Font Color
  To change the color of text, select the desired portion of text and click the 'Color' drop-down menu.

Select the desired color from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.

This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient
Background Color
  To change the highlighted color of text, select the desired portion of text and click the 'Highlight' drop-down menu.

Select the desired color from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.

This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient
Insert Table
  To insert a table, select the desired location, then click the 'Insert Table' icon.

A new window will pop-up with the following fields: Rows - number of rows in table; Columns - number of columns in table; Width - width of table; BgColor - background color of table; Cell Padding - padding around cells; Cell Spacing - spacing between cells and Border - border around cells.

Fill in table details then click the 'OK' button to insert table, or click 'Cancel' to go back to the editor. Click here for tutorial.
Edit Table Properties
  To modify table properties, select a table or click anywhere inside the table to modify, then click the 'Modify Table Properties' icon.

A pop-up window will appear with the table's properties. Click the 'OK' button to save your changes, or click 'Cancel' to go back to the editor. Click here for tutorial.

Note: this function will not work if a table has not been selected.
Show / Hide Guidelines
  To show or hide guidelines, click the 'Show/Hide Guidelines' icon.

This will toggle between displaying table and form guidelines and not showing any guidelines at all.

Tables and cells will have a broken gray line around them, forms will have a broken red line around them, while hidden fields will be a pink square when showing guidelines.

Note that the status bar (at the bottom of the window) will reflect the guidelines mode currently in use.
Insert Row
  To insert row above, click inside cell above which to insert a row, then click the 'Insert Row Above' icon.  Click here for tutorial.

Each consecutive click will insert another row above the selected cell.

Note: this function will not work if a cell has not been selected. 
Delete Row
  To delete a row, click inside cell which is in the row to be deleted, then click the 'Delete Row' icon.  Click here for tutorial.

Note: this function will not work if a cell has not been selected. 
Delete Column
  To delete a column, click inside cell which is in the column to be deleted, then click the 'Delete Column' icon.  Click here for tutorial.

Note: this function will not work if a cell has not been selected.
Insert Column
  To insert a column, click inside cell which is in the column to be inserted, then click the 'Insert Column' icon. Click here for tutorial.

Note: this function will not work if a cell has not been selected.
Increase / Decrease Column Span
  To increase / decrease column span, click inside cell who's span is to be decreased, select the Edit Tables / Cells icon and choose Edit Table from the dropdown menu.  then click the 'Decrease Column Span' icon.  Click here for tutorial.

Each consecutive click will further decrease the column span of the selected cell. Note: this function will not work if a cell has not been selected.
Insert / Modify Flash
  This function currently only supported in Netscape, due to a security setting in IE.

If a flash movie is NOT selected, clicking this icon will open the Flash Manager.

If a flash movie IS selected, then clicking this icon will open the 'Modify Flash Properties' popup window.

To modify the properties of the selected flash movie, set the required attributes and click the 'Modify' button.  Click here for tutorial.
Insert / Modify Media
  If an image is NOT selected, clicking this icon will open the Image Manager.

If an image IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.

To modify the image properties of the selected image, set the required attributes and click the 'Modify' button. Click here for tutorial.
Insert / Modify Image
  If an image is NOT selected, clicking this icon will open the Image Manager.

If an image IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.

To modify the image properties of the selected image, set the required attributes and click the 'Modify' button. Click here for tutorial.
Insert Special Characters
  To insert a special character, click the 'Insert Special Character' icon.

A pop-up window will appear with a list of special characters.

Click the icon of the character to insert into your web page.
Toggle Absolute Positioning
  To position a text box or image using absolute positioning, select the the textbox or image and select the 'absolute positioning' icon. You can now click and drag an image or text box to the location you would like it to reside within the active window.
Source Mode
  To switch to source code editing mode, click the 'Source' button at the bottom of the editor.

This will switch to HTML code editing mode.

To switch back to WYSIWYG Editing, click the 'Edit' button at the bottom of the editor.

This is recommended for advanced users only
Preview Mode
  To show a preview of the page being edited, click the 'Preview' button at the bottom of the editor.

This is useful in previewing a file to see how it will look  in your browser, before changes are saved. Note, this does not include the right and right blocks, header or footers of your page. It only will display what is in your editor at that time.

To switch back to editing mode, click the 'Edit' button at the bottom of the editor.