WYSIWYG Editor

Top  Previous  Next

 

clip0036

 

The following section covers each of the buttons on the WYSIWYG Editor toolbar. Some are described in detail whereas others, such as bold and italic, are given less attention as most people reading this are likely to already be familiar with what they are and how they are used.

 

Source

 

Using the 'source' button you can edit the HTML code directly, and then enter your HTML code in the window that appears. You can also use a third party HTML authoring application, then copy & paste your finished HTML into the HTML edit box, again loaded by clicking the 'source' button.

 

 

Cut

 

The cut button lets you cut some text or an image from the document and paste it in another location, which might be another web page or it could be into a text field. To use the cut button highlight the text or image you want to cut using your mouse and then click on the button.

 

 

Copy

 

The copy button is similar to the cut button (see above) but instead of cutting the selected text or image from the existing document it simply takes a copy. You can then use the paste button (see below) to paste the contents of the clipboard to another location.

 

 

Paste

 

The paste button pastes whatever is in the clipboard to the point where your cursor is currently situated. The paste button is usually used in conjunction with the cut and copy buttons described above.

 

 

Paste as plain text

 

This is similar to the paste button above. The difference is that if you copy formatted text from somewhere else and you need to remove formatting, using the 'paste as plain text' button will insert just simple text into your page editor.

 

 

Paste from Word

 

Word generates a lot of code that isn't compatible with normal html editors and this might cause unexpected problems. When cutting and pasting from Word, you need to use the special 'Paste from Word' button so that all of the non-standard html code can be removed.

 

 

Spell Checker

 

The WYSIWYG Editor comes with a powerful 140,000 words spell-checker that will help to ensure you don't publish web pages with spelling errors in them. To check a page for spelling just click on the spell checker button at any time. The checking will always commence from the top of the current page and the checking will be restricted to the page you are currently working on.

 

 

Undo and Redo

 

The Undo button lets you undo the last action you took. For example, if you had just made some text bold it would unbold the text or if you had just deleted a paragraph of text clicking on the undo button would return the paragraph to where it was before you deleted it. The Redo button will reverse and will Undo. So, for example, if you deleted a word and then clicked on the Undo button to get it back you could then click on the Redo button to get rid of it again. The undo and redo buttons don't cover all design features and circumstances, but they will help with basic text and document styling.

 

 

Find & Replace

 

The Find button allows you to find a piece of text that you're looking for. The Replace button will allow you to find and, if necessary, replace text that appears on the current page. Clicking on it will bring up a window that asks for the search word or phrase. There is another field in which you can enter a word or phrase with which to replace the search term.

 

 

Select All

 

The select all button allows you to select all of the different elements (e.g. text and images) that make up your web page. This is useful for such tasks as applying a font style to all of the text, justifying everything in a certain way (e.g. centered or left justified) or cutting and pasting everything from one location to another.

 

 

Remove Format

 

This button allows you to remove the format for a selected text. To use the remove format button, highlight the text you need using your mouse and then click on the button.

 

 

Maximize the editor size

 

Using this button, you can maximize the size of the WYSIWYG Editor. Just click on the button and the  WYSIWYG editor will occupy the entire space of your computer's screen.

 

 

Bold, Italic and Underline

 

To make text bold, add italics, or underline a single word, sentence or paragraph just select the text you wish to apply the style to and then click on the appropriate button.

 

 

Strike Through

 

If you need some of your text to be struck by a line, just select the text and click on this button.

 

 

Superscript and Subscript

 

Clicking on the superscript button will result in the selected text being reduced in size and moving above the normal text flow. Conversely, clicking on the subscript button will result in any selected text being reduced in size and moving below the normal text flow. This will become clear from the examples below.

 

clip0095

 

 

Insert/Remove Numbered List

 

The numbered list button will convert any paragraphs you have selected into a numbered list. It will number each paragraph consecutively and will apply an appropriate indent. To create a numbered list select the text you wish to use with your mouse and then click once on the numbered list button. Your text will then be converted into a list similar to the one below.

 

clip0096

 

To remove the numbered list, re-select the list and click again on the numbered list button.

 

 

Insert/Remove Bulleted List

 

The numbered list button will convert any paragraphs you have selected into a bulleted list. It will put a bullet before each paragraph and will apply an appropriate indent. To create a bulleted list select the text you wish to use with your mouse and then click once on the bulleted list button. Your text will then be converted into a list similar to the one below.

 

clip0097

 

To remove the bulleted list, re-select the list and click again on the bulleted list button.

 

 

Justification

 

The justification buttons will cause the selected text or image to be justified left, in the center, right or fully justified depending on which button you select.

 

The following screen shot illustrates the four different justification formats.

 

clip0074

 

Left justified means the text is justified so that it is flush with the left hand margin and the jagged edge will be on the right hand side.

 

Center justified means each line of the paragraph is centered so that jagged edges will be seen on both the left margin and the right margin.

 

Right justified mean the text is flush with the right margin and that there will be a jagged edge on the left margin.

 

Fully justified means that the text is justified neatly on both the left and right margins. This is the kind of justification that you will usually see in books and newspapers and magazines.

 

To apply any of the four different kinds of justification simply select the text you want to justify and then click on the appropriate justification button.

 

 

Insert/Edit Link

 

The link button lets you create links to pages on other web sites. Clicking this button will load the window below, in which you need to input your link details. To edit an existing link, highlight it with your mouse and then click on the button. You can then change the details as needed.

 

clip0037

 

 

Remove Link

 

To remove an existing link, highlight it with your mouse and then click on the button. This will change the link into plain text.

 

 

Insert/Edit Anchor

 

The bookmark button lets you quickly create bookmarks anywhere on a page that you can subsequently link to. To create a bookmark position your cursor where you want the bookmark to be and then click the bookmark anchor button. You will be prompted to enter a name for the bookmark. When entering the name it is best not to use spaces. Instead of Order Here you could enter Order_Here or Order-Here. To link to this bookmark use the link button as described above, but instead of entering a web page url in the URL field you would instead enter the name of the bookmark after the # symbol. For example, if you had created a bookmark and called it Romance_audio-books the text you would enter in the URL field of the Link Properties box (ie. the box that appears when you click on the Insert/Edit Link button) would be #Romance_audio-books. When someone clicks on the link the browser will move immediately to the bookmark. This is a great way of providing quick navigation within a page.

 

 

Insert/Edit Image

 

When you click on the image button, the following window will be displayed.

 

clip0038

 

 

You need to populate the fields in this window with the relevant information (including an absolute link to the image file in question - in the URL field) and then click the button labeled "ok" to save your settings and return to the main HTML editor window.

 

 

Insert/Edit Table

 

The table button lets you insert tables into your web pages. When you click on the table button, the following window will be displayed:

 

clip0094

 

You will need to select or insert the appropriate details, as you need the table to appear. You can further customize the table by right clicking on any of the cells with your mouse. This will bring up a pop-up menu that includes such options as inserting rows and columns, merging and dividing cells and individual cell properties.

 

For existing tables, the table properties window above can be also accessed by moving your mouse to the edge of the table. The cursor will change to a "move" cursor and then you need to right click and select Table Properties.

 

 

Insert Horizontal Line

 

The horizontal line button inserts a horizontal line across your web page. It is a quick and easy way of creating a visual break in your pages.

 

 

Insert Special Character

 

This button allows you to insert special characters, like punctuation marks, characters from foreign languages, etc.

 

 

Format (or Style Selector)

 

The style selector lets you quickly apply a style to any of the text on your web page. You should use this frequently to apply heading styles to your headlines and subheadings. To apply a new style highlight the text using your mouse, click on the down arrow next to the style drop down and select the style you wish to apply.

 

 

Font Selector

 

The font selector lets you quickly apply a font to the text on your web page. The WYSIWYG Editor limits the number of fonts you can choose from to the safe fonts, i.e. the ones that work with all browsers and on all different computer systems (e.g. PC, Mac and Linux). You can choose from four sans-serif fonts (Arial, Tahoma, Comic Sans MS and Verdana) and two serif fonts (Courier New and Times New Roman). It is highly recommended that you stick with only these fonts when designing web pages as using other fonts can, unless configured correctly, lead to unpredictable results.

 

To apply a font select the text using your mouse, then click on the down arrow next to the font selector and choose the font you would like to apply.

 

 

Font Size Selector

 

Using the font size drop down you can make text as small or as large as you want. To apply a size to your text select the text using your mouse, click on the font size selector drop down and choose the size of text that you require.

 

 

Text Color

 

The text color button lets you set a color that is only applied to the words you have selected. It can be a very effective way of drawing attention to a special message. To choose a color, you must first select the text to which the color will be applied using your mouse, and then click on the text color button to select the desired color.

 

 

Background Color

 

The background color button lets you set a background that is only applied to the words you have selected. It can be a very effective way of drawing attention to a special message. To apply a background you must first select the text to which the background will be applied using your mouse and then click on the background color button to select the needed color.