---
title: "Code editor"
manual: "TYPO3 Explained"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3coreapi:code-editor@main"
source: "ApiOverview/CodeEditor/Index.rst"
modified: "2026-09-15T12:49:12+00:00"
---

# Code editor

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"](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/Text/T3Editor/Index.html#columns-text-renderType-codeEditor) and in the module
**Media**. Under the hood, [CodeMirror](https://github.com/codemirror/codemirror5) is used.

-   [Usage in TCA](https://docs.typo3.org/permalink/t3coreapi:usage-in-tca@main)
-   [Extend the code editor](https://docs.typo3.org/permalink/t3coreapi:extend-the-code-editor@main)

## 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](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/Text/Index.html#columns-text). By
setting the `renderType` to `codeEditor` the syntax highlighting can
be activated.

By setting the property [format](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/Text/T3Editor/Index.html#columns-text-properties-format)
the mode for syntax highlighting can be chosen. Allowed values:

-   `css`
-   `html`
-   `javascript`
-   `json`
-   `php`
-   `sql`
-   `typoscript`
-   `xml`
-   and any [custom mode](https://docs.typo3.org/permalink/t3coreapi:code-editor-register-mode@main) registered by an
    extension.

### Example

**EXT:my_extension/Configuration/TCA/tx_myextension_domain_model_mytable.php (excerpt)**

```php
<?php

return [
  // 'ctrl' and the other sections of the TCA definition
  'columns' => [
    // ... other columns
    'codeeditor1' => [
      'label' => 'codeEditor_1 format=html, rows=7',
      'description' => 'field description',
      'config' => [
        'type' => 'text',
        'renderType' => 'codeEditor',
        'format' => 'html',
        'rows' => 7,
      ],
    ],
  ],
];

```

Displays an editor like the following:

![A code editor with syntax highlighting for HTML](../../Images/ManualScreenshots/CodeEditor/CodeEditor.png)

## Extend the code editor

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

[CodeMirror](https://github.com/codemirror/codemirror5) delivers a lot more modes and addons than registered in the code
editor by default.

More supported addons and modes are available at:

-   [https://github.com/codemirror/codemirror5/tree/5.27.4/addon](https://github.com/codemirror/codemirror5/tree/5.27.4/addon)
-   [https://github.com/codemirror/codemirror5/tree/5.27.4/mode](https://github.com/codemirror/codemirror5/tree/5.27.4/mode)

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](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/Index.html#start) and
[backend routes](https://docs.typo3.org/permalink/t3coreapi:extension-configuration-backend-routes@main), for example.

### Register an addon

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

**EXT:my_extension/Configuration/Backend/T3editor/Addons.php**

```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'],
];

```

The following configuration options are available:

-   **\<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
<?php

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

```

The following configuration options are available:

-   **\<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:

    ```php
    $GLOBALS['TCA']['tt_content']['types']['css']['columnsOverrides']['bodytext']['config']['format'] = 'css';
    ```

#### 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 **Media**.

#### 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`.