#3: Using the Rich Text Editor

This article will teach you how to add content to your website by using the Rich Text Editor or RTE. This software is a core component of Small Farm Central because it allows you to type information about your farm and format your text using familiar word processing tools. Behind the scenes, the editor translates your text in the language of the web, (a language of code called HTML) so that you don't have to.

Get Started!

The Rich Text Editor can be found throughout the Control Panel. You will use it to create Farmer Defined Pages, build Forms, author Blog entries, and more. It looks like this:

  Figure 1. Rich Text Editor

For learning purposes we will use the Rich Text Editor on the "Create News/Blog" page. Log in to the Control Panel and navigate to:

  Create Content > News/Blog > Create new entry

Now let's go over some of the things that you can do with the toolbar of the RTE:

 Creating and Editing Text
 Pasting Text from Microsoft Word
 Adding a Photo
     Insert a photo from your Gallery
     Upload a photo into the RTE
     Add a photo from another website
 Editing a Photo
     Sizing
     Alignment
 Creating Hyperlinks

Creating and Editing Text

The Rich Text Editor is similar to most other word processing programs (like Microsoft Word). Simply click in the white space below the toolbar and start typing to add your content. To change the format of your text, use the first and second row of icons in the toolbar to do such things as:

    -Change the color, style, or size of your font
    -Highlight, bold, italicize, or underline
    -Cut, copy, or paste

Pasting Text from Microsoft Word

It is often advisable to create your content in other word processing software (like Microsoft Word) first and then paste into the text editor. This way you are able to create content without being connected to the internet as well as have the ability to save your work and come back to it later and use more advanced tools like "Spell Check." However, often times Microsoft Word will add extraneous HTML code to your text and can cause problems in certain web browsers. The RTE will fix this problem if you use the "Paste From Word" feature.

The "Paste From Word" tool can be found on the left side of the toolbar in the 2nd row of icons. It is outlined here:

  Figure 2. Paste From Word Tool

Click the button and a pop-up window appears. Copy your content from your Word document and use the Ctl + v function to paste it into the window. Then click the Insert button to put your text into the Rich Text Editor. That's it! The text editor will do the work to strip out all the extraneous code.

Adding a Photo

The Rich Text Editor allows you to do more than just write copy. Another thing that you can do is add a photo to your content.

First locate the "Insert/Edit Image" button. It can be found in the upper right corner of the toolbar. It looks like a photo of a tree. You can see it pointed out in the screenshot below:


  Figure 3. Insert/Add Image Tool

Clicking on this button will bring up a pop-up window which looks like this:

  Figure 4. Insert/Edit Image Window

There are several ways in which you can add a photo in the Rich Text Editor:

  1. Insert a photo from your Gallery
  2. Upload a photo into the RTE
  3. Add a photo from another website

Inserting a photo from your Gallery:
If you have already created a Gallery of photos that you want to include in your website, you can access those photos and insert them into the RTE. (Read the article Uploading Photos & Creating a Gallery to learn more). If you don't have any photos in your Gallery yet, skip to the next section to learn how to upload an image directly into the RTE.

To access your Gallery click on the Browse button to the right of the Image URL field. It looks like this:

  Figure 5. Browse Gallery Button Highlighted

Another pop-up window will appear where you can view the images that you have already uploaded to your Gallery. This is called the "Image Manager". See below:


  Figure 6. Image Manager Window

Select the image that you wish to use and it will be inserted into the "Insert/Edit Image" window. Fill out the "Image Description" and "Title" fields. This will help you identify the image, as well as provide information that will be displayed to those browsing the Web with their images turned off or if image is temporarily not accessible. Click the Insert button to add the photo to your other content in the RTE.

Uploading a photo directly into the Rich Text Editor:
If you haven't created a Gallery of photos yet, there will be no images in the Image Manager to choose from. However, you can still upload a photo using this tool. Click on the Upload button in the top right corner of the Image Manager. Another pop-up window will appear. Click the Choose Files button. Find the photo you wish to upload and open it. Your file name will now appear in the Upload window. See the red arrow below:

  Figure 7. Uploading to the Rich Text Editor

You can upload more photos at this time by clicking the "Add more?" link. (See the blue arrow in the screenshot above.)
When you are finished, click the Upload to Server button and your image(s) will appear in the Image Manager (see Figure 6.). They will also be uploaded into your Gallery, which can be found in the sidebar menu of your Control Panel.

Select your image from the Gallery and it will appear in the Insert/Edit Image window, fill out the description and title fields and click Insert.

Adding a photo from another website:
You can type in a URL (a Uniform Reference Locator is a specific character string that references an Internet resource.) directly into the inset/edit image window. This will inert an image which already exists on another website. This is not recommended. Note: Using an image that does not belong to you is a form of copyright infringement and can result in ramifications including hefty fines. You can read more about using images from the internet in this article. Remember, even if you save the online image to your computer before you upload it to your website, it can still be cited for copyright infringement. If you are going to use an image that does not belong to you, make sure you get the proper permission from the owner/photographer.

Another problem arises if the website containing the original image makes changes to that image. For example, if they decide to take that image down or replace the image but keep the same URL, it will effect your website and you can end up with a missing or unwanted image on one of your pages. It's best to stick with photos that you have taken yourself, or obtained permission to use and to upload them into your Gallery.

Note: You must always upload your images in order to add them to the Rich Text Editor. You cannot "Copy" and "Paste" images from other sources (i.e. Word documents) or "Drag-and-Drop" (selecting an image from your files and dragging it into the RTE). Doing so will add extraneous HTML code to your content and this will cause problems within you webpage.

Editing Photos

Sizing:
You will probably notice that the image that you have inserted into your content is quite large. To re-size it, left click on the image once. You will see a series of square white boxes appear around the image One of these is circled in red below:


  Figure 8. White Boxes Around a Selected Image

You can re-size the image by clicking on the boxes and dragging them around the screen. Use the boxes on the corners to adjust the photo's length and height at the same time. This will keep the image true to the original photo's dimensions. Dragging the boxes on the top, bottom, and sides will stretch or squish the image disproportionately. Play around with this functionality to get an idea of how it works. Remember: You can always take a big image and make it smaller, but enlarging a small image can sometimes make the photo appear blurry or pixelated on your website.

You can also resize the photo by using the Insert/Edit Image tool.

Here is how: Click on the photo to highlight it. White square boxes will appear around your photo (see Figure 8.). Click on the Insert/Edit Image tool (see Figure 3.) and your photo will appear in the Insert/Edit Image window. There are three tabs at the top of the window. Click on the Appearance tab. You will come to a screen that looks like this:


  Figure 9. Editing an Image in the Appearance Tab

Adjust the size of the photo by changing the numbers in the "Dimensions" boxes. (see the red arrow in Figure 9.) If the "Constrain Proportions" box is checked off, you will only need to change one of the dimensions. The other dimension will automatically adjust to stay true to the proportions in the original photo. Checking this box ensures that your image will not become stretched or distorted when you resize it.

There are other tools in the Appearance tab you can use to edit your photo and make it fit better with the rest of your content.

Alignment:
Once your photo is in your page, you will want to adjust it so that it fits in better with your existing content. Most likely you will want to wrap the text around the photo or create some spacing between the photo and another element, like a table or other photo. What you will be doing is adjusting the photo's alignment. To start, open the Insert/Edit Image window and click on the Appearance tab. (These steps will tell you how to find the Appearance tab.)

Next to the word "Alignment" there is a drop down menu with many options. (see the blue arrow in Figure 9.). The most useful alignment options will be the ones titled "Left" and "Right" which will float your image either to the right or left of the page and allow the text to float around the image. You can also try out the other options. When you choose an alignment option, you will see a preview on the right.

To create space between your text and the image, or between to photos or other elements, use the "Vertical Space" and "Horizontal Space" options (see the green & orange arrows in Figure 9.) Start with a value of 10 and adjust accordingly from there. Again, this change will be reflected in the preview box.

The Appearance tab is also where you can add a border to your photo. The thickness of your border corresponds to the number you type in the box next to the word "Border" (see the purple arrow in Figure 9.). The higher the number = the thicker the border.

Once you have made your changes, click Update in the lower left hand part of the menu. You photo will be adjusted and the text will now be aligned around your image. Here is an example of content before adjusting the alignment:

  Figure 10. Unformatted Content in the Rich Text Editor

Here is what the same content looks like after adjusting the alignment, vertical & horizontal spacing, and adding borders:


  Figure 11. Aligned Photos & Content in the Rich Text Editor

And this is what the page will look like on a Small Farm Central website:

  Fig 12. Rich Text Editor Content on a Small Farm Central Website

Remember: You many have to return to the Appearances tab in the Insert/Edit Image window and continue to change these options in order to get your page looking just right. Don't forget to Save changes!

Creating Hyperlinks

Hyperlinks or "links" are clickable text or images that serve to move the user from the current webpage that they are viewing to a new page within your website, or to a page on another website altogether. Using a link is great way to refer to other content or information that would be useful to your user, making their experience visiting your website helpful and engaging.

Note: Anchor Links are links that move the user to a new location within the same page. To learn more, read the article Creating Anchor Links

Hyperlinks are are often signified within webpage content with blue text and underlining. Sometimes the text becomes underlined when the user rolls over it with their cursor. The cursor itself can even change into a hand with a pointing finger to indicate to the user that the text can be clicked on and will take them to another source of information. However, these standards can change from site to site based on webpage styling and design.

To begin, highlight the text or image that you want the link to be attached to. Then find the Insert/Edit Link button on the Rich Text Editor toolbar. The button looks like a few links in a chain. See below:

  Figure 13. Hyperlink Tool

Clicking on the chain link will open up the Insert/Edit Link window. See below:

  Figure 14. The Insert/Edit Link Window

This is where you will put the URL address of the page you want to link to. A URL or Uniform Reference Locator is a specific character string that references an Internet resource. It can sometimes be difficult and time-consuming to figure out where you want your link to lead on your site. To make this easier, use the "Link List" drop-down menu. This is a list of every page on your Small Farm Central site; simply click on the page you want to link to and the URL will be automatically populated.

If you would like to create a link to another page on a website, you need to know the URL of the specific page. You can find this by going to the website and looking in the address bar of your browser. For example:

  Figure 15. URL in a Browser's Address Bar

Then simply copy & paste or type it into the "Link URL" box. Make sure the the URL begins with " http:// " or the link will not work.

Complete the process of creating a hyperlink by clicking the Insert button in the lower-left corner. Your text should turn blue to indicate that it is now an active link. (See Figure 11. to view the blue hyperlinked text in the Rich Text Editor)

Congratulations! You have just created a Hyperlink.
Don't forget to Save changes!

Now click the link to "Go to public site" in the top left of the Control Panel and check to make sure your new Hyperlink is working. Here is an example of what it would look like on a Small Farm Central webpage:

  Figure 16. Hyperlinked Text on a Small Farm Central Webpage

Notice in the example that the text is not the traditional blue color or underlined. This is because of the design and color styling of this particular page. On this page, when the cursor is placed on the hyperlinked text, the text becomes underlined and the cursor turns into a pointer finger to indicate to the user that they can click the text for more information.

Ready to move on? Click on another article below: