This information is about the old rich text editor, which has now been replaced with the html-area based rte which works across multiple browsers and operating systems and has more features. It also looks much more like Microsoft Word. The same information applies, though.

The Rich Text Area lets you enter formatted text into your web pages using a WYSIWIG interface which is very similar to a word processor. There are usually a number of differences, since most web engineers and designers will constrain what you can do, either generally, or in particular contexts, since consistency of styling is usuall more important in a web page that anarchic formatting.

These are some of the options available in the Rich Text Editor.

I am only giving an explanation for icons that are important for web publishing. Basic word processing functions are self-explanatory.

Paragraph Style

Use this option to control the look of your text. Clicking on the icons opens up this drop down menu:

For normal text select the Normal (P) setting. The definition will already be set for your in the style sheet for your website.

Headings are used for titles: with each number the size of the font is (usually) successively smaller. Again there will already be a definition in the style sheet and all you have to do is select the size you want.

To see how it is going to look on the web click on 'save document and view page icon' at the top or bottom of the work area. If you don't like the way it looks, make changes.

Character Style

You can use this option to remove HTML formatting from your text.

Font Style & Font Size

Font Styles and Font Sizes are already defined in the stylesheet for your website, so don't use this or it will totally change the look of your pages.

Color Text

Color Text lets you change the color of individual words or characters. Use this option very sparingly if at all as your text color is already defined in the stylesheet for your website.  

Insert Link & Remove Link

Clicking on this icon either lets you add a hyperlink or remove a hyperlink. Click on the insert link icon and you will get the screen below.

You will end up by default in Page option tab view (green background)

Page

 

 

This tab lets you link to a page or page's content on your website.

To create a link to a page: select that page by clicking your cursor on the name and your link will be automatically added.

Linking to a page's content section comes in handy when you have a piece of information that appears on several web pages. You only have to create that content once and then link to it by clicking on the arrow to the right of the file's name and then select the content from 'Content elements' and your link will be automatically added.

File

 By selecting the 'File Tab' you can create a link to a file on your website. The file can be a picture or a document that you want to share.

This is how your screen will now look. I clicked on a name of a folder in the pic folder and a second column opened with the title 'Files:' with all the names of the files in that folder.

Clicking on the name of the file automatically creates the link to it.

External URL

By selecting the 'External URL Tab' you can insert a hyperlink to a page on the web. Just copy the URL from your browser's address bar and paste it into the box.

Target gives you a choice of opening the link in the current window or if you want it to open in a new window. By default links to pages outside the current website open in a new window.

Now press the [Set Link] button   to save the link.

Also when you are creating or editing your text by just writing the web address will create a hyperlink automatically.

Email

By Selecting the 'Email Tab' you can link to an email address

Write the address in the 'Email address:' box and press the [Set Link] button.

Also when you are editing your text by just writing the email address will create a hyperlink automatically.

Remove Link

Clicking on the 'Remove link tab' will automatically remove any hyperlink from your document. The tab will not be colored green to show it is active, you just press it and will be back in the Rich Text Editor.

Insert Table

Clicking on the 'Insert Table' icon will open up this screen.

Rows and Columns

This option helps you define how your table is going to look. You decide how many row and columns it is going to have. By default it is set to 2 rows and 2 columns.

Padding and Spacing

Padding defines how close to the cell edges the text/content of the cell comes. A good size setting is 5.

Spacing defines how close together the individual cells are in a table. If you use padding you don't really need to space your cells apart. The exception is when you are using a border to define individual cells and want them to show that they are spread apart a bit like this:

In the example the spacing is set at 5 and a border of 1 is set in the border option.

Borders

Borders defines if you see lines between individual cells. If you don't want any to show set the 'Border Width' box to 0. In the 'Border Color' box you can write the hexadecimal color value if you know it or move your cursor over the individual color squares to select your color this way.

Background

Background defines the color/pattern behind the text in the table. You can use a picture by writing the URL where the picture is in the 'Background Image URL' box or you can write the hexadecimal color value into the 'Background Color' box or move your cursor over the individual color squares to select your color this way.

Table Example

The table below was created with the following settings:

Rows: 5 Columns: 5 Cell Padding: 5 Cell Spacing: 5 Border Width: 5 Border Color: #000000 (black) Background Color: #FFCCFF (pink)

Edit Table

You will have noticed that when you were in the insert popup screen that it said at the top 'Create / Edit Table'. The 'Edit Table' option, however, was greyed out.

To activate the 'Edit Table' option you place your cursor over your table until the cursor changes to 4 arrows going into 4 different directions [1] and click. Your table now has handles around it.

[2] Then click again at the 'Insert Table' icon and make the changes. You popup menu will look the same as for creating the table in the first place.

Your screen will look now like the picture to the left with the 'Create / Edit Table' pop up window. This time, however, the 'Edit Table' tab is not greyed out. Click on it and you will see this:

The 'Edit Table' tab is now black and you can click it and then make changes to your table.

Aligning Table

By default the new table is left aligned on the page. To change the alignment, select your table and then chose the alignment option you want (center or right) from the toolbar.

Insert Picture

To insert a picture into your webpage you click on the 'Insert Picture' icon . You will now see this screen:

• In the left column under the heading Folder tree: is the directory structure of the website.
• In the right column under the heading 'Images:' are thumbnails (small versions of the pictures) in the folder you have selected. The number in brackets next to the heading 'Images' tells you at a glance how many pictures are in that folder.
• Above each thumbnail is the information about the picture.

First the icon states the type of format the picture is in, either GIF or JPG

Next to it is the name of the picture and then at the end the size of the picture in pixels.

If you move your cursor over the icon your cursor will turn into a hand and below the hand it will show the name of the picture inside a yellow box.

If you click on the icon you will see this drop down up menu. Rename, Copy, Cut and Delete are standard functions.

Clicking on info or clicking on the thumbnail picture will open the pop up screen on the next page with a larger thumbnail of the picture, the file name, file size and the pictures dimensions.

You select the picture to insert it into you page by clicking on the picture's name.

If your picture is still on your computer there are 2 ways to upload it. The 1st way you can only upload one picture at a time. The 2nd way you can upload up to 9 pictures at the same time.

Uploading New Picture Version 1

If the picture is not yet uploaded to the website, you can do this right from here. However, you can only upload one picture at a time this way.

To get to the upload options move the slider in the 2nd column all the way to the bottom and you will see this on your screen

Use the [Browse] button to get to the picture on your computer and select and the click on the [Upload files] button. Now you can insert the picture following the instructions on the previous page.

Uploading New Picture Version 2

In this version you can upload several pictures or even files at once (up to 9).

[1] Click on "Filelist" in the Typo3 column

[2] In the middle column you will now see at the top of the screen "fileadmin/". This is the directory structure of website on the server.

[3] Select the folder where you want to upload your pictures/file(s) to and you will see this popup menu

Select "Upload Files" and you will see this screen below. By default it will only give you 1 file to upload, but by clicking on the down arrow you can select as many as 9 files to upload at once.

•  Browse to your pictures/files on your hard drive and select them.

• Once you have them all selected click on the [Upload files] button.
• Then you can insert the picture as explained in insert picture.

You probably noticed this at the top of the pop up menu. Below is an explanation of the options.

In the examples below I have used the Slide10.jpg picture as both a New Magic Image and a New Plain Image selection.

New Magic Image

Using this selection will place your picture at a reduced size on your page with the following dimensions: 300 pixels wide and 312(or whatever other size you set) pixels in height. The original picture size was 475 pixels wide and 317 pixels high.

New Plain Image

Using this selection will place your picture on your page at the original picture size of 475 pixels wide and 317 pixels high.

Note

Once the picture is on your page by selecting the picture (moving your cursor over the picture until the handles around the picture appear) and selecting the 'Insert Picture' icon again you will get the above screens where you can see the size/dimensions of your picture. Changing the dimensions of the width or height of the picture will not automatically adjust the other proportionally. Selecting the picture and holding down the Shift key and then moving the mouse will let you resize the picture proportionally.

Fine-tuning Your Picture

To place your picture where you want it on your page, select your picture and click on the alignment buttons to have it centered, left aligned or right aligned.

The following options are available by selecting the picture and clicking the [Insert picture] button again and from the pop up menu make your selections.

To place a border (a line) placed around your picture click on the empty box and place a check mark into it.

Margin left/right and Margin top/bottom lets you decide how close you want the text of the page to come to the picture.

Filling in the 'Title' box will show the name of the picture when you move your mouse over the picture when it its displayed in the browser. It is a good idea to always place a name in there.

This is how the pop up window you are working in looks with all the fields filled in.

When you are done click the 'Update' button to save your changes and you will be back in the Rich Text Editor.

Horizontal Line

Use this to place a horizontal line between sections of text on your page.