The RTE offers a wide range of formatting options for text content. The user interface is similar to familiar word processing software like Word, making it intuitive to use. The inserted formatting is automatically converted into HTML commands. In the TYPO3 backend, the appearance of the text can be approximately recognized, but it is essential to check changes also in the frontend.
Even though the operation of the editor is very similar to other word processing programs, we would like to give you a quick introduction to all functions.
Styles
There are three different styles. There are two styles available in a normal text: Block Styles and Inline Styles. The third style is described in the sections about links and tables.
The crucial difference between the two styles is the area they affect. Block styles always apply to an entire paragraph. To set a block style in the editor you just need to click in the paragraph you want to format and then select the style you want from the dropdown menu. An entire paragraph will be affected by the change without the need to select anything. This also means that you need to place text in a different paragraph if you want to format it differently/normally. The following block styles are available:
- Header 1-6
- Area – Regular/Large/Small (can be seen in the screenshots below)
- Size: Lead (whole section in larger font size)
- Alert: Danger/Success/Warning/Info (like normal area, only colored)
- Spacer: 15 px/30 px/45 px/60 px/75 px/ 90 px (defined distance between two paragraphs)
In order to apply inline styles, you need to mark corresponding areas, sentences or words for them. Then, as with block styles, select the format you want from the dropdown menu (for inline styles, just scroll down in the styles menu). The following styles are available (all are shown in the screenshots and on our preview page):
- Size: Small (small font size)
- Color: Muted/Primary/Success/Info/Warning/Danger/Default (text color)
- Label: Default/Success/Warning/Danger/Info/Badge (marker)
The colors of the different styles correspond to the default settings of the website base. The design configurator allows you to customize these colors to your corporate design.
If you want to remove a style, click in the affected place in the text and choose the already selected format in the dropdown menu. If this does not work, there are two other ways to remove a formatting. We will introduce them to you in the sections Remove Format and Source.
Paragraph Format
The second dropdown menu is the Paragraph Format. There are only two options: Normal and Formatted. By default, normal is always set. A formatted paragraph has no breaks in the frontend and can be scrolled horizontally.
Bold, Italic, Subscript, Superscript & Lists
Bold, Italic, Subscript, Superscript and Lists are typical options in common text editing programs. They are used in the RTE in the same way as in other programs.
- Select the character, word, phrase or line to be displayed in bold, italics, subscript, superscript or as lists.
- To remove the formatting, click in a formatted word or list entry or select a group of words and 'turn off' the option by unsing the selected icon again.
- For lists, you can alternatively start a new line and then select one of the two list options. Each additional line is a new list entry.
- Several formatting options can be easily combined with each other.
- Two other ways to remove a formatting are the Remove Format option and the Source code.
Text Alignment
Align Left, Center, Align Right and Justify
The text alignment can also be designed individually for each paragraph. Simply click into a paragraph and select the alignment. If you want the text to be aligned differently again, simply select a different option. The alignment can also be deleted with Remove Format and changed in the Source code. By default, the text is left-aligned.
Block Quote
With a block quote, quotations can be highlighted in a special way.
Remove Format
Select the area in the text where the formatting should be removed and use the Remove Format button. Any formatting will be removed. Areas and links remain, you can remove them in source mode.
Links
Insert/Edit a Link
To link text, select a word or an entire phrase and go to the link icon. The Link Browser opens. It has six tabs. Each tab can be used to insert a link, they differ according to the type of link to be inserted: Page, File, Folder, External URL, Email, Telephone.
Linking works basically the same way every time. Most likely, you will link using the first tab - this is where you set internal links, i.e. links that point to URLs of your homepage.
At the top of the Link Browser, specify whether the link should be opened in a new tab/window (Target). If you do not select anything at this point, the link will be opened in the current browser tab. The title of the link is displayed when a user moves the mouse over the link.
Insert an internal link as follows:
- Select the target window and assign a title.
- Unfold the page tree in the left part of the Link Browser (click on the arrow on the left).
- Select:
- a page by clicking on the page name
- a page content by clicking on the bordered arrow to the left of the page name and then link a content in the right area of the Link Browser.
- To edit a link, click into the link in the text and open the link browser with the link button.
- To remove a link, go on the link in the text and then use the second link icon with the cross (Unlink).
The right link browser area lists the contents of a page with the assigned headers. In order to uniquely identify content, each content element must have an individual heading (this can also be hidden).
New Object Styles open for links. With this style, links can be displayed as buttons.
In the frontend, links (normal links and link buttons) are marked by a hover effect.
Tables
Table Properties
Tables can be created similar to text processing programs. At the beginning you choose how many rows and columns the table should consist of. At any time you can add rows and columns or join cells. You have all the typical options for editing a table. You can access the options by right-clicking in the table and selecting Table Properties from the menu that appears. The following values can be adjusted:
- Headers: First Row, first column or both
- Headers are formatted differently than other cells and contents.
- Border size: Free field to enter the value (in px)
- Determines the outer frame thickness.
- Alignment: not set, Left, Center, Right
- Defines the alignment of the table.
- To align text, use the options in the editing palette above the text box or the cell properties.
- Caption: Free field for entering a heading
- Heading appears above the table and can be edited and aligned like normal text.
- Summary: Free field to enter a summary
- Is not visible in the frontend.
Cell Properties
Single or multiple cells can also be edited in the cell properties. To do this, right-click in a cell or select several cells and then use the right-click function. In the menu that appears, go to Cell > Cell Properties. You can customize the following here:
- Word Wrap: Yes, No
- Horizontal Alignment: not set, Left, Center, Right, Justify
- Aligns the text in the line horizontally.
- Can also be aligned using the visible editing options above the text field. In the cell properties you will still have 'not set' selected, even if the text is aligned in the frontend.
- Vertical Alignment: not set, Top, Middle, Bottom, Baseline
- Aligns the text vertically.
- Cell Type: Data, Header
- In contrast to the table properties, you can format individual cells as headings here.
- Background Color & Border Color: Free field to enter a color code (e.g. #000000 or #FFFFFF)
- Defines the background and border color of the selected cells.
When you are in a table, table object styles become available. Here you can define the overall appearance, i.e. whether the rows are colored in alternating colors, whether the table has a visible border or whether individual cells/rows are highlighted.
Cut, Copy & Paste
As with other programs, a text can be copied with CTRL + C, cut with CTRL + X and pasted with CTRL + V. You can do this in the RTE with buttons above the text area instead of using keyboard commands.
Additionally, you can paste text from the clipboard as plain text or paste from Word. These two options are not supported by all browsers.
When inserting text, you should also be aware that original formatting may slip in. Therefore, insert text in Source mode or use a simple text editor as an intermediate step, which eliminates unwanted formatting and special characters.
Undo & Redo
You can go back or repeat a few steps in the text at any time. To do so, use the shortcuts CTRL + Z for undo and CTRL + Y for redo or use the corresponding arrow buttons in the RTE.
Insert Horizontal Line
A horizontal line can be used to visually separate content, as shown in the screenshot below.
Insert Special Character
If necessary, special characters can be inserted into the text at any time. Just use the icon for the special characters and a window with the selection will appear. Click on the required character: The window closes and the special character appears in the text.
Maximize
Normally, the RTE is displayed in editing mode of content elements or pages, with all editing options located above and below the editor. In total the RTE is only 500 px high. To enlarge the view of the RTE and hide all other options, simply maximize the editor. This means that only the editor and its options are visible in the entire content area. Especially with long texts it can be useful to use this option.
Another click on the icon takes you back to the normal view.
Source
The source code is generally not necessary for the editor, but sometimes it can be useful to have this mode, e.g. when inserting text or removing unwanted formatting.
When inserting text, you simply switch to source and insert the text, so no formatting is transferred or special characters are set. In normal mode the text can then be edited as usual.
Even if you write and edit the text in the editor first, for example, protected spaces can sneak in, which can lead to unsightly paragraphs. You will not see them in normal mode, but they will affect the appearance of the text in the frontend. In the source code, look for the code snippet: . You will need to remove this code snippet, especially if it is in the middle of the text.
Sometimes, however, a protected space can also be useful if, for example, certain groups of words or numbers with associated unit should not be separated from each other. In such cases, you can deliberately use this string in source code mode.
Would you like to know more?
All information about the available editions can be found on the webpage for our TYPO3 Website-Base. You have the possibility to get a Website at a Fixed Price or you decide for a Website as a Service package, with which no further costs for hosting or security and function updates will come up to you.