TYPO3 Rich Text Editor (RTE) for Perfect Website Content

Well, the TYPO3 Rich Text Editor (RTE) is your good friend because it allows you to format content, add links, structure your content with lists, and keep things organized all without writing a single line of code. If you've ever worked with Word or Google Docs, you'll find your way around immediately.

And the best part is that the RTE in TYPO3 is based on a framework called CKEditor. It remains modern, flexible, and powerful for text formatting. Administrators can determine which buttons you are allowed to use, and you can focus entirely on writing good content that looks right on the website.

So, let's get our fingers moving and get ready to edit even more easily with the TYPO3 RTE.

Let's dive in!

Links are among the most common elements you add in the TYPO3 RTE. It is very easy to insert links:

• Internal Links: They are connected to another page of your website via the TYPO3 link browser.
• External Links: You can add complete URLs (e.g., https:// example.com). You can also set whether the link opens in the same tab or a new one.
• Email Links: Clicking on an email address opens the visitor's email program.
• Anchor Links: You can jump to a specific section of the same page. This is helpful if the page is long and contains a lot of content.

When you add links in this way, make sure they follow the TYPO3 standard and function correctly on your website.

Lists and tables are excellent ways to structure content so that your audience can easily grasp it. TYPO3 RTE offers simple options for both:

• Lists: Choose a bulleted or numbered list for any type of content, such as steps, key statements, topics, etc.
• Tables: Tables are a great means to organize structured data. You can customize tables by changing borders, adding/removing rows and columns, or merging cells when it makes sense.
• Styles: Some TYPO3 configurations provide special styles for tables, such as alternating colored rows/columns, grids with borders, etc. Depending on which options the administrator has enabled.
• Limitations: Tables are important for structuring content, but images should generally not be inserted into tables. It is better to use dedicated content elements for images.

With these tools, you can present your content clearly and structured without unnecessary hurdles for your audience.

Sometimes you need a character that is not available on your keyboard, for example, ©, ®, or letters with accents. The TYPO3 RTE has a built-in tool to help you with this.

• In the toolbar, open the “Insert special characters” option.
• Select the desired character from the list and insert it into your text.

This way, you no longer need to copy symbols from other sources everything is directly available.

If the source code button is active, the TYPO3 RTE can also display the underlying HTML editor of your content. This is particularly useful in the following situations:

• When the formatting looks strange and you want to know which code is causing it.
• When you need to remove unwanted tags that originate from content pasted from Word or other editors.
• When you want to check if your headings, lists, and links are correctly structured.

In most cases, editors will not use this option often. However, it can be an excellent tool for fixing more complex formatting issues.

Whether the button is available depends on the admin configuration of your website, as administrators can show or hide these options.

The Rich Text Editor (RTE) in TYPO3 is extremely flexible and is based on the CKEditor. Editors usually focus only on the buttons in the toolbar.

However, with the RTE, the administrator or integrator can decide which options are available, how the HTML output is reduced or cleaned up, and what can be formatted.

There are several key places for configuration, which we will introduce below based on both the published TYPO3 documentation and the best practices of TYPO3 users.

1. RTE Presets with YAML

The RTE presets in TYPO3 are defined via a YAML configuration file. These presets control the layout, the available buttons, and the functionality of the editor. A simple definition might look like this:

editor:
 config:
   toolbar:
     items:
       - bold
       - italic
       - link
       - bulletedList
       - numberedList

It is important to note that the YAML can be modified and presets created. For example, a news editor may need a simpler defined toolbar, while someone in the organization may need a larger toolbar; or they could define a minimal RTE, one for news editors, another for advanced editors.

2. TSconfig Options

Another way of tuning RTE besides modifying YAML is the PageTSconfig options. TSconfig can be used to control how classes can be used, as well as control what buttons are available, and the processing of the RTE.

Example: limit what the classes are for tables and links:

RTE.default.proc.allowedClasses = table-bordered, table-striped

Example: add a "Paste as Plain Text" button, and activate with:

RTE.default.showButtons := addToList(pastetoggle)
RTE.default.buttons.pastetoggle.setActiveOnRteOpen = 1

These small settings help keep content consistent with the site’s design.

3. Controlling HTML Output

TYPO3 has a system by which any HTML created in the RTE is cleaned using entryHTMLparser_db to ensure that only valid (or allowed) tags and attributes are stored in the database. 

For example, if inline styles and widths are stripped from tables:

RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.style.unset = 1
RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.width.unset = 1
RTE.default.proc.entryHTMLparser_db.tags.table.fixAttrib.height.unset = 1

This allows the proper output to be kept on the frontend and uses only CSS, not inline visual styles.

4. Defining Custom CSS Classes

It’s possible for admins to expose the custom CSS classes from the site’s stylesheet so that editors can apply them directly in the RTE.

RTE.default.contentCSS = fileadmin/css/rte.css

RTE.default.proc.allowedClasses := addToList(error, small, arrowlink)
RTE.classes.error {
 name = Error Highlight
 value = color: #FF0000; font-weight: bold;
}
RTE.classes.small {
 name = Small Text
 value = font-size: 80%;
}

This ensures that editors must choose from compliant styles determined by design, and not independently change font styles at will.

5. Advanced Table Styling

TYPO3 supports the definition of advanced table classes, such as alternating colored rows. Administrators can configure classes for alternating rows and provide them as selectable options in the RTE:

RTE.classes.stripedtable {
 name = Striped Table
 alternating.rows {
   oddClass = row-odd
   evenClass = row-even
 }
}

And in 

rte.css:
table.stripedtable tr.row-odd { background: #f9f9f9; }
table.stripedtable tr.row-even { background: #fff; }

This provides editors with visually interesting tables, while keeping within brand standards.

6. Security as well as Clean Content.

• Automatic linking of URLs can be turned off for tags; this avoids including links from showing up as clickable links in code examples.
• Use the copy/paste function on documents/usual content from Word? Always clean it up with “Paste as plain text!”
• Restricting available tags and classes ensures editors can not break layouts or create TYPO3 accessibility issues.

7. Fixing RTE

If the RTE does not load properly in the backend:

• Go to the TYPO3 Backend, open User Profile → User Settings → Reset Configuration tab, and click ’Reset configuration and clear temporary data
• Make sure your YAML or TSconfig does not have any syntax errors.
• Check that the correct preset is assigned in your site’s configuration.

Even if you have a fully functioning RTE, editors can still encounter issues. Here's how to cope with those:

• Pasting Clean: When copying from Word or other websites, invisible formatting may be transferred. Use Ctrl + Shift + V (or Cmd + Shift + V on Mac) to paste cleanly or use the "Remove Formatting" button.
• Line Break vs Paragraph: To start a new paragraph, press Enter. If you only want a simple line break without additional spacing, use Shift + Enter.
• Source Code View: The RTE has a "Source Code" button. If display or formatting errors occur, open the source code view and check the underlying HTML code to fix the issue.
• Missing Toolbar Buttons: Administrators can restrict certain buttons based on role. If you don't have access to an icon or function, contact the administrator.
• Reset RTE: If the editor behaves strangely, you can reset the configuration in TYPO3, delete temporary data, or simply log out and back in.

As was covered in this chapter, the TYPO3 Rich Text Editor (RTE) is well worth your while to ensure that your content remains clean, consistent, and easy to manage. 

Regardless of whether copying introductory text, creating internal links, source code, defining a list, or adding images, understanding the features and functionality you use helps avoid issues editors regularly face. 

Plus, there is a difference between putting out professionally designed content. If you are overwhelmed managing TYPO3 or want to maximise its rich text editing capabilities, working with a trusted TYPO3 agency can be significant. 

We can help simplify and optimize your RTE setup, simplify your workflow, and ensure that every time you publish content on your site, it looks 100% clean.

With proper guidance, it's easier than you can manage your content and let TYPO3 do the rest!