The WYSIWYG Editor Guide

WYSIWYG Text and Image Manager

The WYSIWYG module is a comprehensive text / html editor. What you see is what you will get.

Most of the buttons are similar to MS Word documents and so most people will be familiar with the basic features. With this module, you can enter text, configure font, font color, background color, set hyperlinks, insert images and position everything where you want.

The functions and features are as follows:

Positioning Images and Text

This module uses basic HTML so understanding that a space is not seen the same way in HTML as in a Word Document, will allow you to position images where you want.

The module supports drag and drop. You can position an image on the right hand side by either right justification or, simply adding spaces with the space bar and then inserting the image at the cursor position.

For example: A simple way to add a picture / image:
Say you want to add a picture and some text to the right of some existing content.

1. Click on the image to set the cursor position.

The cursor has appeared at the bottom right corner.

2. Then using the Space Bar, add several spaces to move the cursor to the right.

3. Select and Click the Insert Image Icon

4. The Upload Manager opens and you can search for an image on the web site or on your PC and insert where the Cursor is blinking.

You can specify size, width and hight and also the amount of vertical and horizontal space required and border size if required. Set the baseline and click OK

5. If the image size is not quite right, you can resize by dragging a corner.

6. if the image is not in the right position, simply place the cursor at the left edge of the Image and delete spaces to move the image left, or add spaces to move the image right.

7. Advanced Positioning Images and Text

This module uses basic HTML so understand first that a space is not seen the same way in HTML as in a Word Document.

You can position an image or text content using left or right justification or, simply adding spaces with the space bar and then inserting the image at the cursor position. You can also use Tables like professional web designers.

 

7.1      Using Tables

Note: Think of a table as something like a field in an Excel Spreadsheet. The borders of the table can be visible or invisible and you can place images and text content in various tables to get the right position on a web page.

 Tables expand and contract automatically depending on what content is inserted.

 Each table uses the same HTML rules for setting position, justification, background color, text font and text color. So you could set up several tables on a page to position content.

 Note: You can save and view the result on the live site and come back to the Editor to reposition the image until you are satisfied.

Editing with the HTML View Tool

If you are an advanced user and understand html coding, you can view and change the html coding for this Editor Window you are working on.

Click the <> Icon to turn the HTM Coding Tool on or off.

You can see here how html handles spaces: