#3: Using the Rich Text Editor (2014 Upgrade)

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:

text_editor_basicshot.jpg
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

To copy, cut, or paste text in the Rich Text Editor, you will need to use the standard keyboard shortcuts.

On a PC, they are:
Copy (Ctrl+C)
Cut (Ctrl+X)
Paste (Ctrl+V)

On a Mac, they are:
Copy (Command+C)
Cut (Command+X)
Paste (Command+V)

Pasting Text from Microsoft Word

It is often desirable 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. However, often times Microsoft Word will add extraneous HTML code to your text and can cause problems in certain web browsers.

In previous versions of the Rich Text Editor, there was a specific “Paste from Word” tool. The current version of the RTE does not have this function but does a much better job of removing extraneous coding from copied text. If you want to be sure that no extra coding is included after pasting in text, highlight the text and use the “Remove Formatting” tool to strip any coding from the selected text. The tool looks like like a capital T, underlined with a small “x” by it (see image below).

text_editor_removeformatting.jpg
Figure 2. Remove Formatting Tool

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 an image of a mountain range with a sun above it on the right. You can see it pointed out in the screenshot below:

text_editor_imageicon.jpg
Figure 3. Insert/Add Image Tool

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

insertimage_basicshot.jpg
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 a file folder with a magnifying glass in front of it. (see below):

insertimage_camera.jpg
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:

imagemgr_basicshot.jpg
Figure 6. Image Manager Window

Select the image that you wish to use and the source code of that image will be inserted into the "Insert/Edit Image" window. Fill out the "Image Description" field. 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 OK 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 left corner of the Image Manager. Another pop-up window will appear. Click the Add Files button. Find the photo you wish to upload and open it. You can also drag photo files into this window. Your file name will now appear in the Upload window.

imagemgr_upload.jpg
Figure 7. Uploading to the Rich Text Editor

You can upload more photos at this time by clicking the "Add Files" link or continuing to drag photos into the windows.
When you are finished, click the `Upload' 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 field 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 insert/edit image window. This will insert 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, or make sure it is labeled as free to commercially use or share.

Another problem that arises when you insert and image from the internet is that if the website containing the original image makes changes to that image, the image will also change on your website. 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 as well as have saved somewhere as a backup. These are the best photos to upload into your Gallery and use on your website.

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. Several of these are circled in yellow below:

resize_image_corners.jpg
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 the Insert/Edit Image window will appear. On the main tab there will be options for dimensions:

Adjust the size of the photo by changing the numbers in the "Dimensions" boxes. 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. Once you have made your changes, click OK in the lower right hand part of the window

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 do this, click on the image so it is highlighted, then use the alignment icons (align left / align center / align right) in the lower left corner of the toolbar to adjust the photo's alignment.

There are other tools in the Insert/Edit Image tool that allow you to edit your photo and make it fit better with the rest of your content. Select the photo and then click on the Insert/Edit Image icon. Click on the 'Advanced' tab in the window that comes up.


insertimage_advanced.jpg
Figure 9. Editing an Image in the Advanced Tab

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 red & yellow arrows in Figure 9.) Start with a value of 10 and adjust accordingly from there.

The Advanced 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 orange arrow in Figure 9.). The higher the number = the thicker the border.

Once you have made your changes, click OK in the lower right hand part of the window. 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:

unformattedtext.jpg
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:

formattedtext.jpg
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:

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

Remember: You many have to return to the Advanced 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!

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:

linkhighlight.jpg
Figure 13. Hyperlink Tool

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

linkedit.jpg
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. You can use the "Link List" drop-down menu tif you are linking to another page on your website. 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 can't find the link you are looking for in the link list, follow the instructions below to get the URL of the page you'd like to link to.

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:

URL.PNG
  
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. You can also use these instructions to find the URL of a page on your own website.

Complete the process of creating a hyperlink by clicking the OK button in the lower-right corner. Your text should change color (usually blue) to indicate that it is now an active link. Sometimes it will also be underlined. (See Figure 11. to view the purple hyperlinked "Small Farm Central" text in the Rich Text Editor. This text links to the Small Farm Central website.)

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 right 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:

hyperlinkonsite.jpg
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: