The TinyMCE as TYPO3 RTE

What is the "tinymce4_rte"?

TinyMCE stands for Tiny Moxiecode Content Editor and is a WYSIWIG editor for web applications based on JavaScript. The extension "tinymce" integrates it into TYPO3 and offers an API for its use. tinymce4_rte" in turn integrates the editor as RTE in TYPO3. Like the similarly named "tinymce_rte" it contains additional plugins for links and images, but otherwise they don't have much in common.

Installation / Integration

Open the TYPO3 backend and click on "Extension Manager" in the "Admin Tools" section on the left side.

Using the function "Add Extensions" you can click "Update now" to update your package list. Then enter "tinymce4" in the search and click on the button under "Actions" to add the "tinymce4_rte". Remember that you must also have the tinymce extension installed. However, this dependency is usually installed automatically during installation.

Afterwards you have to remove the standard editor "rtehtmlarea" in your installation, otherwise the extensions would interfere with each other. This is similar to the installation of tinymce4_rte.

What can the "tinymce4_rte" do?

In the following we list some important functions, which are either provided by the tinyMCE itself or have been developed by us for the RTE.

Editor instead of HTML code

This text box on our Beispiel-Webseite contains the following text:

"Hello, folks, it usually looks like this!"

This is what the text box looked like without an RTE.

After activation in the Extension Manager, the text box now looks like this (is much easier to read, right?).

As you can see, you don't need to use cumbersome HTML code, instead you can write your texts similar to Microsoft Word.

Output the corresponding HTML code

Insert internal links, files, folders, external links and e-mail addresses

If you select a word in your text box and click on "Insert" under the drop-down menu, you will see the window shown in Figure 6, a plugin developed by us and based on the plugin of the "rtehtmlarea" editor.
To link internal pages, click on the "Page" tab and select the page you want to link from the page tree.

If you want to link files, you can do this via the "File" tab. Here you can either upload files or choose from the directory tree.

Under the tab "Folder" you can link folders. Create a new folder or select a folder from the directory tree.

Select the "External URL" tab to insert an external link. Enter your link there. You can see what the title says when you hover over the link with the mouse.

In order for your e-mail address to be linked, you must enter your address in the "Email" tab.

Insert pictures

Also this plugin was developed by us for the tinyMCE and consists for the most part of code from rtehtmlarea. It allows you to insert images in the text. You can upload your own pictures or choose from sample pictures.

Configuration

There are 4 types of configuration:

  • Configuration of TinyMCE
  • Configuration of the link and image plugin
  • Provision of a content CSS file
  • RTE configuration of TYPO3

Configuration of TinyMCE

First, copy "standard.js" to the "fileadmin" folder or another of your choice. Rename these according to your wishes or keep the name. Then open the page in the page tree - usually the start page - and click on "Edit page properties" above the heading.
(Figure 13). Go to the "Resources" tab and enter the following code in "Page TSconfig":

RTE.default {
  tinymceConfiguration = fileadmin/standard.js
}

All changes - such as Adding or deleting plugins - you must do this in the copied file, because the "standard.js" of the extension will be overwritten every time it is updated and your changes would be deleted.
To configure the selection dialogs of the link and image plug-in, you can use the standard rtehtmlarea configuration, as the functionality comes from here.

For example, with the following configuration setting, you can remove the ability to add "Magic Images". There are, however, many more options.

RTE.default.buttons.image.options.removeItems = magic

If you compare Figure 16 and Figure 11, you will notice that the menu item "Magic Image" is no longer available.

You can also configure your content CSS by specifying the following configuration with your path to the CSS file in your page TSConfig:

RTE.default.contentCSS = fileadmin/Test.css

RTE configuration of TYPO3

Finally, there is the configuration of the TYPO3 word processor, i. how TYPO3 actually represents this in the frontend. For example, with the following configuration you can set that only the following tags are displayed: "div, p, span". For more options, see the TYPO3 Core API Reference.

Video Instructions

If this manual is too boring for you, you can also watch it as a video ;-)