Search · Index

How To Use the WYSIWYG Editor

Overview

We are using a What You See Is What You Get (WYSIWYG) editor called Xinha (Xinha Is Not HTML Area). 

Xinha has many the features of a word processor and many of the buttons will be familiar.  This document currently includes instructions for creating a url link and adding images.

To make image management easy Xinha has been integrated with a file storage instance in the compass.  Thus, you can use Xinha to upload and display images anywhere you see the WYSIWYG editor. Please see screencast demo in using Xinha.

Creating url links

With a few simple steps you can create attractive links for your blog posts and content pages. Please see screencast demo.

Finding the link button

 

There are actually two buttons. One is Insert Web Link and the other is Insert Internal Link.  In most cases it is okay to use a full Web Link even if the page is inside your current system. This section covers this case.  There will be specific instructions in cases where you have to use Internal Links.

Step-by-Step Adding a Link

1. Find the page you want to link to.
2. Copy the url for that page into your clipboard.
3. On the page you are editing, type the human readable text you would like to hyper link.
4. Highlight the text.
5. Click the Insert Web Link button shown above.
6. Paste the url where it is indicated.
7. Title(tooltip) is optional.
8. In general, do not change the target from None (use implicit).
9. Click OK.
   

Step by Step with Images

1. Find the page you want to link to.
2. Copy the url for that page into your clipboard.
   
   
   
   
3. On the page you are editing, type the human readable text you would like to hyper link.
4. Highlight the text.
5. Click the Insert Web Link button shown above.
6. Paste the url where it is indicated.
7. Title(tooltip) is optional.
   
   
   
   

Adding Images

This section will teach you how to take an image from your desktop computer's hard drive or local directory and use it on the web site.

Finding the image button

Xinha has many buttons. If you hold your mouse over the button it will tell you what it does. The image button looks like a little picture of mountains.

 

Uploading an Image

1. Clicking the image button will open the following pop-up (make sure pop-ups are allowed).
   
   
   
   
2. Click Open Folder.
3. Now click Browse to browse and locate from your desktop a file to upload.
   
   
   
4. Be sure to choose a graphics file (GIF, JPG, PNG). You can not use a power point directly. You must first export it as an image (JPG).
   
   
   
   
5. To select a file, click the radio button next to it. When you have selected your file, click Upload.
   
   

Inserting the Image

1. Go to the edit view for the page or field you want the image to appear in (hint: open another window or tab).
2. At this point you should see an WYSIWYG widget for editing.
3. Put your cursor where you want the image to appear and click on the image button (second row, second from the right).
4. Paste the url from your clipboard (right click choose paste or Control-v).
5. Click OK and your image will appear.
   
   
   
   
6. Once you click OK you will go back to the previous pop-up and you will see a preview of your image. You can add an alternate text for the image.
   
   
   
   
7. Click OK and your image will appear in the main editor window!
   
   
   
   

Resizing Images

At this point, the image option does not allow resizing images. There are, however, 2 ways to resize images outside the image option.

1. You may edit the HTML source code to set the height and width of your image.
2. Or you may resize the image using another application outside wysiwyg and then upload the image to file storage.
3. Among the many applications available for resizing or editing images, you may use Snag-It and IrfanView, both of which provide easy means to resize images.

Text Alignment and Wrapping

In wysiwyg, texts are usually left-aligned or left-justified, by default. You have, however, options to change text alignments. You may make texts center-aligned, right-aligned, or full-aligned.

Wysiwyg should automatically make texts wrap around images. You may follow this procedure to make sure this takes effect.

1. Click the INSERT IMAGE icon and choose an image. On the Layout section of your Insert Image window or pop-up, select Left Alignment.
2. On the Spacing section, indicate 10 for both Horizontal and Vertical spacing.
3. Click OK to continue. Text wrapping and alignment should take effect.
   

­

---

Categories: (XO)Wiki (Docwiki Navigation)