Using the rich text editor

This user guide helps you to make basic use of the rich text editor in TYPO3, using it to remove formatting, insert links and format tables and lists.

Basics

TYPO3 offers you the rich text editor in different places. The available icons may vary slightly. Most formatting options are self-explanatory and should be familiar from the most common word processing applications (italic, bold, left-aligned, right-aligned, indented, etc.).

The <>Source button allows you to edit the HTML source code. However, you should only use this button if you know your way around HTML programming.

Inserting text

The rich text editor of version 8 of TYPO3 has the advantage that it carries out extensive filtering measures when inserting pre-formatted text from a word processing program such as Word. In this way, the source text is simplified in the background and inadmissible formatting is removed. This also happens when saving and reloading.

These measures simplify the work process. However, this also means that you cannot make all changes in the source code itself. If you have the appropriate knowledge of HTML, use the content element Plain HTML.

Inserting a link

  1. Select the text you would like to link.
  2. Click the Link icon in the toolbar.

Screenshot inserting link

A pop-up window will appear allowing you to specify the target link. You can set 4 types of links:

  • Internal links to sub-pages or content elements of your website (Page tab): Select the target of an internal link in the page tree. It must always be below the same start page. If you are the editor for several websites, you will also have several start pages (green globe as icon) in the page tree. Cross-page links must always be defined as external links.
  • External links to other websites (External URL tab): Enter the address of the desired page in the URL field. It is not necessary to specify the protocol (e.g. http://).
  • Link to a file (File tab): Select the desired file in the directory tree.
  • Link to an e-mail address (Email tab): Enter the desired e-mail address. If users click on the link, the local e-mail program opens to send an e-mail to the address entered.

Screenshot types of links

Creating a table

  1. To create a table, click on the table icon in the toolbar.
  2. Select the size of the table.
  3. The table is inserted in the text field.

Screenshot creating a table


To format the table, right-click in the table in the editor and then click on Table Properties.

In the table properties you can, for example, define headers for the table. Header rows make the table sortable: The header row contains small icons with which users can arrange the content in descending or ascending order.

Screenshot table context menue


If you want to remove these icons again, you must assign a different style to the table:

  1. Place the cursor at any position in the table.
  2. Click on the tag of the table (table) in the status bar at the bottom of the editor.
  3. Your table will be highlighted in the editor.
  4. Select Table unsortable in the drop-down Styles.

When formatting the table via the context menu, do not set widths and heights. These settings have no effect. Web pages are displayed on a wide variety of output media and must therefore be variable, especially in width. If you really need an exactly formatted table, create a PDF file, upload it and include it as a file link.

Screenshot table style

Formatting a list

In the toolbar of the rich text editor you will find the familiar icons for numbered and unnumbered lists. By default, these lists are displayed with a grey background. However, you can also choose a white or striped background:

  1. Place the cursor at any position in the list.
  2. Click on the tag of the list (numbered list: ol, unnumbered list: ul) in the status bar at the bottom of the editor.
  3. Your list will be highlighted in the editor.
  4. Select the desired background in the drop-down Styles.

((Das Einstellen des Hintergrundes funktioniert bei mir so nur für nummerierte Listen, die Stile sind im Drop-down auch doppelt vorhanden. Ist das so gewollt?
Ändern des Hintergrundes geht jetzt auch ohne "Blockstil entfernen", richtig?))

Screenshot formatting a list