Using the TinyMCE rich text editor

Using the Rich Text Editor

When you are creating or editing pages for this site, some sections can be written in "rich text". This means, instead of just typing plain text, you can format your text with bold, italic, bullets, tables etc.

Adjacent to each section of rich text you will see a toolbar with symbols such as etc, which should be familiar to users of word processing software. These work in the same way as normal word processors - click on the text you want to be bold, then click the button, for instance.

This will not be described in detail, but here are some tips and tricks that are not quite so obvious:

Formatting your text

There are a series of drop-down boxes, where you can select the style of your text. Most text is in "Paragraph" format, but you might want to make a heading using the "Heading1", "Heading2" or "Heading3" style. You can also select a different font family, eg Arial, Times or Verdana etc, or a font size using the appropiate drop-down selectors.

Formatting and cleaning up your text

There are a number of problems that can occur:

• Your text looks OK in the editor but is different when you save the document
• You change the format or font but when you save it those changes seem to be ignored
• You pasted something from Microsoft Word and it is not formatting correctly

These are all aspects of the same, or similar, problems and the best way to fix it is to clean up the text. Here's the approach - you might need to try some or all of these things:

• When pasting text you have copied from Word, use the "Paste from Word" button. Normally you would paste using the Edit-Paste menu or control-v but this also puts formatting instructions from the Word document into your page. Using the "paste from word" button cleans up this formatting.
• If it's too late to do the above because you have already copied the text from Word, you can clean it up by:
  • select the text you want to clean up
  • press control-c to copy it
  • press the "paste from word" button
  • (if you are using some browsers you may be prompted to take an extra step, which is to paste the text into a box using control-v)
  • This will replace your original text with cleaned up text.
• You can also clean up text by selecting it and clicking the "cleanup" button.
• Also, it's worth checking that your text is in the right format. Eg, select the text then select the Format drop-down box and select "Paragraph" for normal text.

A final thing you need to check is the "input format" - this appears below the text editing area.

• Click on the words "input format" - this will display some options
• Select the "full HTML" option - this will ensure that the formatting you have input is displayed in the final document

Check how it's looking

To see how your document will look when saved, click the "Preview" button at the bottom of the page. This will display:

• The "teaser" ie shortened version of the page
• The full page as it will look
• The editing screen so you can carry on working with your page

Note that the "preview" button does not save your work. You must click "Submit" to save your work.

Inserting images into your text with IMCE Image Browser

If you have the IMCE file/image browser installed on your system, you have an easy way to upload images and insert them into your rich text pages.

To insert an image, click the "image" button.  You should see a pop-up window, the Insert/Edit Image window, that looks like this:

Note the "browse" button (highlighted in the picture above by the red arrow).  If you don't see it, IMCE is not installed - go to the next section to see an alternative way of inserting images.

Click the "browse" button indicated.  This will take you to a file browser screen, like this:

This window lets you browse the files that have already been uploaded - there are a number of options displayed at the top:

• Upload - This lets you upload files from your computer. Click Upload, select the file you want, then click the Uplaod button.

• Thumbnails - This lets you create small thumbnail images from the images on the list.  Select the image you want, then click Thumbnails, select the size you want, then click Create thimbnails
• Delete - Select a file, then click Delete
• Resize - Select the image you want to resize, click Resize, enter the size you want, check whether you want to create a new image or resize the orginal, then click the Resize button
• Send to editor - Use this to insert the selected image into your document.  This will return you to the Insert/Edit Image window with the name of the selected file in the URL box.

In the Insert/Edit Image window, enter a description and a title for your image - it is important to give descriptions to images, not all users will be able to see the images so they need the descriptions to understand whatis on your page.

The Appearance and Advanced tabs give you additional control over how the image will be displayed.

Finally, click the "Insert" button to place the image in your document.

Inserting images into your text without IMCE Image Browser

Images are inserted using the "image" button. Click on it to insert an image.

You will then need to specify the URL of the image. To find out the URL and to use it to specify your image, use the instructions below.

If the image appears in another web page and you want to show it here:

• Find the image you want to put into your document
• Right click on it and select "Properties"
• You will see a "location" property displayed, eg something like http://equilibrium-business.com/../images/cut.gif
• Drag the mouse over this property to select it
• Click control-c to copy it
• Now go into the page you are editing and position the cursor where you want the image to be
• Click the "image" button
• Past the URL you just copied into the "image URL" box - ie click in the box then press control-v.
• Now enter a description and a title for the images - this is important if you want your page to be friendly towards users of text readers and other assistance-type software
• Click "insert" to place your image into your document

If the image is on your PC and you need to upload it - there's a slightly diffferent procedure. You need first of all to upload the image file to the website.

• Click on the words "File attachments", which appear lower down on the screen
• Click the "browse" button and select thefile you want to upload
• Then click the "attach" button
• When the file has been uploaded you should see it listed in the list of file attachments
• Then save your document by clicking "submit" (this is absolutely necessary, but it's easier this way). Then click the "edit" tab to return to editing.
• Now find your uploaded file in the list of attachments.
• Drag the mouse over the bit that says "files/your file name.jpg" or something similar. This is the image URL.
• Click control-c to copy it. Now we can proceed as before:
• Click the "image" button
• Past the URL you just copied into the "image URL" box - ie click in the box then press control-v. The URL should begin with files/ followed by your file name.
• Now enter a description and a title for the images - this is important if you want your page to be friendly towards users of text readers and other assistance-type software
• Click "insert" to place your image into your document.

Note that when you click the "image" button there is also a tab which lets you control the appearance of the image. The alignment property is quite useful it you want the words to "wrap around" the image.  You can also control the size of your image (but see the mote below).

Image sizes

Your site probably limits how big an uploaded file can be.  If you encounter problems with this, you will need to resize your image before you upload it.

It is important that images are correctly sized for your website.  For example, a picture taken on a digital camera could be over 2 Megabytes and when displayed will be 3000 pixels wide, which is MUCH wider than most comuter screens.  An image in a web page needs to be much smaller, for example a news website might use images 300 pixels wide and approximately 30 Kilobytes.  A correctly-sized image will look better, will take less time to load and will take up much less space on your website.

So, it is a good idea to size your images correctly before uploading them.  You can do this with standard image editing software (Paintshop Pro, Photoshop, etc).  Another very useful program, which is free, is Easy Thumbnails - this can be downloaded from http://www.fookes.com/ezthumbs.

Adding links to other pages

You can easily add links to other pages (or other websites) using the TinyMCE editor:

• Enter the text that you want the reader to click on - for example: "to read more click here..."
• Select the text by clicking and dragging the mouse over it.
• Click the "link" button
• The "Insert/Edit Link" window will pop up.
• (If you have IMCE installed, this window will have "browse" button next to the Link URL entry.  You can use this to upload files and/or select an uploaded file to link to.)
• Enter the URL of the page of document you want to link to.
• The Target option gives you control over how the link is displayed.  The default action is for the link to be displayed in the current window - if you want the link to be displayed in a new window, you can select the appropriate option.