#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.
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
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:
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
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
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
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
Select your image from the Gallery and it will appear in the
Insert/Edit Image window, fill out the description and title fields
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.
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
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
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
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
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
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
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:
- Can I include Member Notes on my pick-up labels?
- How can I view the sign-up process for my CSA the same way my members will see it?
- What does "Admin Season" mean?
- Will setting up a new Season disrupt the Season I am currently running?
- Can I change my Member Assembler subscription plan to accomodate more or less members?
- View all (6 more)