Code editor

Changed in version 13.0

The code editor functionality was moved from the optional "t3editor" system extension into the "backend" system extension. The code editor is therefore always available.

Checks whether the previous system extension is installed via \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('t3editor') are now obsolete.

The code editor provides a backend editor with syntax highlighting. The editor is used by TYPO3 itself for TCA fields with type "text" and renderType "codeEditor" and in the module File > Filelist. Under the hood, CodeMirror is used.

Usage in TCA

Extensions may configure backend fields to use the code editor by TCA. The editor is only available for fields of type text. By setting the renderType to codeEditor the syntax highlighting can be activated.

By setting the property format the mode for syntax highlighting can be chosen. Allowed values:

  • css
  • html
  • javascript
  • json
  • php
  • sql
  • typoscript
  • xml
  • and any custom mode registered by an extension.

Example

Excerpt of TCA definition (EXT:my_extension/Configuration/TCA/tx_myextension_domain_model_mytable.php)
[
    'columns' => [
        'codeeditor1' => [
            'label' => 'codeEditor_1 format=html, rows=7',
            'description' => 'field description',
            'config' => [
                'type' => 'text',
                'renderType' => 'codeEditor',
                'format' => 'html',
                'rows' => 7,
            ],
        ],
    ],
]
Copied!

Displays an editor like the following:

A code editor with syntax highlighting for HTML

A code editor with syntax highlighting for HTML

Extend the code editor

Custom modes (used for syntax highlighting) and addons can be registered.

CodeMirror delivers a lot more modes and addons than registered in the code editor by default.

More supported addons and modes are available at:

To register custom addons and modes, extensions may have these two files to extend the code editor:

  • Configuration/Backend/T3editor/Addons.php
  • Configuration/Backend/T3editor/Modes.php

Both files return an array, as known as in TCA and backend routes, for example.

Register an addon

To register an addon, the following code may be used:

EXT:my_extension/Configuration/Backend/T3editor/Addons.php
<?php

use TYPO3\CMS\Core\Page\JavaScriptModuleInstruction;

return [
    'my/addon' => [
        'module' => JavaScriptModuleInstruction::create(
            '@codemirror/addon',
            'addon',
        )->invoke(),
        'cssFiles' => [
            'EXT:my_extension/Resources/Public/Css/MyAddon.css',
        ],
        'options' => ['foobar' => 'baz'],
    ],
    'modes' => ['htmlmixed', 'xml'],
];
Copied!

The following configuration options are available:

<identifier>

<identifier>
Type
string
Required
true

Represents the unique identifier of the module (my/addon in this example).

module

module
Type
string
Required
true

Holds the JavaScriptModuleInstruction of the CodeMirror module.

cssFiles

cssFiles
Type
array

Holds all CSS files that must be loaded for the module.

options

options
Type
array

Options that are used by the addon.

modes

modes
Type
array

If set, the addon is only loaded if any of the modes supplied here is used.

Register a mode

To register a mode, the following code may be used:

EXT:my_extension/Configuration/Backend/T3editor/Modes.php
<?php

return [
    'css' => [
        'module' => 'cm/mode/css/css',
        'extensions' => ['css'],
    ],
];
Copied!

The following configuration options are available:

<identifier>

<identifier>
Type
string
Required
true

Represents the unique identifier and format code of the mode (css in this example). The format code is used in TCA to define the CodeMirror mode to be used.

Example:

$GLOBALS['TCA']['tt_content']['types']['css']['columnsOverrides']['bodytext']['config']['format'] = 'css';
Copied!

module

module
Type
string
Required
true

Holds the JavaScriptModuleInstruction of the CodeMirror module.

extensions

extensions
Type
array

Binds the mode to specific file extensions. This is important for using the code editor in the module File > Filelist.

default

default
Type
bool

If set, the mode is used as fallback if no sufficient mode is available. By factory default, the default mode is html.