Using a Wysiwyg Editor

When entering content on a Drupal site it is quite often set up so you can use a What You See Is What You Get - WYSISYG editor. What this means in a nutshell is that you get the ability to do Word Processing like operations like

• Making text Bold, Italic and Underlined
• Making text into links
• Inserting Images into entries
• Creating list entries
• Changing the size and colour of text

This is done using a WYSYWIG toolbar. There are different tools which can be used in Drupal two popular ones are TiyMCE and FCK editor. The following examples use the TinyMCE editor.

 
The way to alter the text is to select the text using your mouse and then to click on the image which represents what you want to do it.

For example to make a selection of text BOLD, you would click on the  button.

Uploading an Image

To upload an image you would place the flashing cursor where you want the image to appear in your post and then click on the  button.

A pop up window then appears.

The thing we need enter is the URL of where the Image is located on the Internet. This if fine if have already uploaded the image to our site. We can find the image and use the Copy Image Location ability which our browser gives us.

If the image is not already uploaded to the image then you need to upload it, ideally to the same site that you are already working on. You may have the ability to upload files on the same page you are using the this WYSIWYG editor.

This is the case for the website I'm working on. If I go down the page I see the text File attachments.

Click on the text File attachments and you'll see an upload box open up.

 

Click on the Browse button and upload your Image in this way. When you have uploaded it you should see a line with the attached file name listed and also the URL of the image on the website. 

Select and copy the URL of your image. You are not ready to continue to the Insert Image box which appears when you press in your editor.

Paste in the URL of the image into the box Image URL.

In my example I've added description of the image which is good for compatability and accessibility of your web page. 

The dimensions (in pixels) were added in automatically but if your image is a suitable size you don't need to enter anything in these boxes. Or if for some reason you have uploaded an image that is too big you can resize it here.

I've also aligned the image to the left and added some space around the Image to make sure that the text which wraps around the image isn't too close.

 

Adding a link to a Webpage

To add a link to a webpage, the best thing to do first is to copy the URL of the page that you want to link to your computers memory. 

The easiest way to to this is to visit the page in your browser and select the URL from the Address bar at the top of your browser and copy it (eg. press Ctrl + C ).

 

You can then return to the post that you were editing in Drupal and select the text that you wish to turn into a link.

Then click on the  button. A pop up window will appear.

Here you should paste (eg CTRL + V ) the URL of the page you want to link to in to the Link URL box. You should also enter something in the Title box as well to make sure your site is compatible and accessible for the most amount of people.

You should then click on the Insert button to complete adding the link. Your text should appear in the link colour that is set for your website ( in my case it's green).