---
title: "Enhanced Code Editor plugin"
description: "How to setup and configure TinyMCE's Enhanced Code Editor plugin for advanced HTML editing with IDE-like features."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advcode/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/advcode/index.md"
version: "latest"
last_updated: "2026-09-28T23:17:17Z"
tokens: 2352
---
# Enhanced Code Editor plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
The Enhanced Code Editor plugin (`advcode`) provides an advanced code editor within TinyMCE that makes HTML editing more efficient for power users. The editor includes professional IDE features that are enabled by default:

- Syntax color highlighting for HTML, CSS, and JavaScript
- Bracket matching and code folding
- Multiple selections and carets for efficient editing
- Search and replace functionality
- Dark or light mode toggle for code display
- Font size adjustment controls
- Full-screen mode for distraction-free editing

> **Note:** Full-screen mode requires the [Full screen](../fullscreen/) plugin and the Enhanced Code Editor to be running in [inline mode](#advcode_inline).

## The difference between the Code and Enhanced Code Editor plugins

**Example**

```js
tinymce.init({
  selector: 'textarea.advcodedemo',
  plugins: [
    "advcode", "advlist", "anchor", "autolink", "charmap", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  height: 600,
  width: '100%',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

tinymce.init({
  selector: 'textarea.codedemo',
  plugins: [
    "code", "advlist", "anchor", "autolink", "charmap", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  height: 600,
  width: '100%',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advcode',
  toolbar: 'code'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Enable full-screen mode

To enable the full-screen mode button in the Enhanced Code Editor, configure the plugin to run in inline mode and include the fullscreen plugin:

```js
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  advcode_inline: true,
  plugins: [
    "fullscreen", "advcode",
  ],
  toolbar: "code"
});
```

## Selection behavior in code editors

When switching between the rich-text editor and code editor views, selection state behavior varies depending on the direction of the switch and whether changes are made.

### From rich-text editor to code editor

**Collapsed selection (cursor position):** When the cursor is positioned at a specific location in the rich-text editor, the code editor will open with the cursor at the equivalent position in the HTML source.

**Text selection:** When text is selected in the rich-text editor, the selection is not preserved in the code editor. Instead, the cursor is positioned at the beginning of the selected content in the HTML source.

### From code editor back to rich-text editor

**No changes made:** If no changes are made in the code editor and you click **Cancel** or press **Esc**, the original selection state or cursor position in the rich-text editor is preserved.

**Changes made:** When changes are made in the code editor and you click **OK** or **Save**, the selection state or cursor position is **not** preserved. The cursor is positioned at the beginning of the document content.

> **Note:** Selection state preservation is not guaranteed when switching between editor views. For the most reliable editing experience, make changes in one view before switching to the other.

## Configuration options

The Enhanced Code Editor plugin provides several configuration options to customize its behavior:

### `advcode_inline`

The `advcode_inline` option allows the Enhanced Code Editor to open within TinyMCE’s existing editor space instead of displaying in a separate dialog box. This enables the full-screen mode functionality when combined with the fullscreen plugin.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

Example: enable inline mode
```js
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: ["fullscreen", "advcode"],
  toolbar: "code",
  advcode_inline: true,
});
```

> **Note:** This option was introduced in TinyMCE 6.3. When enabled, the Enhanced Code Editor replaces the editor content area instead of opening in a modal dialog.

### `advcode_prettify_getcontent`

The `advcode_prettify_getcontent` option controls whether HTML code is formatted when `editor.getContent()` is called. When enabled, this automatically formats the content using the same formatting as `tinymce.activeEditor.getContent({ prettify: true })`.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

Example: enable content prettification
```js
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_getcontent: true,
});
```

> **Important:** If existing HTML content in the database is not well-formatted or has inconsistent indentation, enabling this option may **change the formatting** of previously saved content, which may be undesirable in some cases.

> **Note:** This option was introduced in TinyMCE 7.3. It provides the same functionality as calling `tinymce.activeEditor.getContent({ prettify: true })` but automatically applies formatting to all `getContent()` calls.

### `advcode_prettify_editor`

The `advcode_prettify_editor` option controls whether code rendered inside the Enhanced Code Editor is automatically formatted with correct indentation. This improves code readability and maintains consistent formatting within the editor.

**Type:** `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`

Example: disable editor prettification
```js
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_editor: false, // disable automatic formatting
});
```
Example: enable editor prettification (default behavior)
```js
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_editor: true, // default value
});
```

> **Note:** This option was introduced in TinyMCE 7.3. By default, any code rendered inside the Enhanced Code Editor will be formatted with correct indentation for improved readability.

## Show view on editor load

The [`view_show`](../custom-view/#view_show) option can be used to show the Enhanced Code Editor view when the editor is loaded.

For example:
```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advcode',
  toolbar: 'code',
  view_show: 'code',
});
```

## Enhanced Code Editor search and replace keyboard shortcuts

Enhanced Code Editor provides the following shortcuts within the code dialog.

| Action | Windows Shortcut | macOS Shortcut |
| --- | --- | --- |
| Find | Ctrl+F | Command+F |
| Find Next | F3 | F3 |
| Find Previous | Shift+F3 | Shift+F3 |
| Go to Line | Ctrl+G | Command+G |
| Close Search Panel | Esc | Esc |
| Indent Code | Ctrl+] | Command+] |
| Outdent Code | Ctrl+[ | Command+[ |
| Fold Code | Ctrl-Shift-[ | Command-Option-[ |
| Unfold Code | Ctrl-Shift-] | Command-Option-] |
| Fold All | Ctrl-Alt-[ | Ctrl-Option-[ |
| Unfold All | Ctrl-Alt-] | Ctrl-Option-] |
| Accept Completion | Enter / Tab | Enter / Tab |
| Select Next Occurrence | Ctrl+D / Ctrl+B | Command+D / Command+B |
| Select All Matches of the Selection | Ctrl+Shift+L | Command+Shift+L |
| Go to Line (alternative) | Ctrl+Alt+G | Command+Option+G |
| Start Autocompletion | Ctrl+Space | Control+Space |
| Toggle Comment | Ctrl+/ | Command+/ |
| Move Line Up or Down | Alt+Up / Alt+Down | Option+Up / Option+Down |
| Copy Line Up or Down | Shift+Alt+Up / Shift+Alt+Down | Shift+Option+Up / Shift+Option+Down |
| Delete Line | Ctrl+Shift+K | Command+Shift+K |

> **Important:** Within the code dialog, some shortcuts differ from the same key combination in the editor body. **Ctrl+B** (or **Command+B**) selects the next occurrence of the selection rather than applying bold, and **Ctrl+F** (or **Command+F**) opens the code dialog search panel rather than the [searchreplace](../searchreplace/) dialog. These shortcuts apply only while the code dialog has focus.

## Toolbar buttons

The Enhanced Code Editor plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `code` | Opens the code dialog. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Enhanced Code Editor plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `code` | View | Opens the code dialog. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Enhanced Code Editor plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceCodeEditor | Opens the code editor dialog. |

Example
```js
tinymce.activeEditor.execCommand('mceCodeEditor');
```