---
title: "Enhanced Code Editor plugin"
description: "How to setup TinyMCE's Enhanced Code Editor plugin."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advcode/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/advcode/index.md"
version: "7"
last_updated: "2026-06-15T05:48:07Z"
tokens: 1858
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advcode/).
# Enhanced Code Editor plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).

> **Tip:** As of TinyMCE 7.0, the Advanced Code Editor plugin has been renamed to Enhanced Code Editor. When adding Enhanced Code Editor in your editor, continue to use advcode.
The [Enhanced Code Editor](#) plugin (`advcode`) brings a more advanced code editor to TinyMCE. This code editor makes it easier to modify the HTML, and is a useful add-on for power users. It comes with features often found in IDEs, all enabled by default:

- Syntax color highlighting.
- Bracket matching.
- Code folding.
- Multiple selections/carets.
- Search and Replace.
- Dark or light mode button for code display.
- Increase and decrease display font size buttons.
- Full-screen mode button.

> **Note:** For the Enhanced Code Editor to offer a full-screen mode requires the [Full screen](../fullscreen/) plugin and requires 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',
  toolbar: 'code',
  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

tinymce.init({
  selector: 'textarea.codedemo',
  plugins: 'code',
  toolbar: 'code',
  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Example: basic setup

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

## Example: enable the Enhanced Code Editor full-screen mode button

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

## Selection state when opening and closing the code editor

The safest assumption is that selection state is not preserved when switching between the rich-text editor (ie, the default TinyMCE editor instance) to the code editor dialog view of a TinyMCE document.

### Switching from the rich-text editor view to the code editor

If the current selection in the TinyMCE instance is collapsed (ie, is a flashing insertion point), the insertion point will be in the equivalent place when the code editor is opened.

If the current selection in the rich-text editor is an actual selection, that state is not preserved when switching to the code editor.

Instead, the insertion point in the code editor is placed at the beginning of what was the selection in the rich-text editor.

### Switching from the code editor back to the rich-text editor view

When switching back from the code-view dialog to the rich-text editor, selection state is almost never preserved.

If you have a selection or a collapsed selection in the rich-text editor and

1. open the code view dialog;
2. make no changes; and
3. exit the code view dialog by clicking **Cancel** (or pressing the **Esc** key);

the selection or collapsed selection will likely be preserved in the rich-text editor.

Otherwise, the selection state is not preserved on round-tripping from rich-text to code-view and back.

Instead, the insertion point is placed at the beginning of the editable block closest to the beginning of the TinyMCE document.

## `advcode_inline`

> **Note:** This feature is only available for TinyMCE 6.3 and later.
As part of the TinyMCE 6.3 release, the Enhanced Code Editor plugin includes a new option, `advcode_inline`, that allows users to open the Enhanced Code Editor within TinyMCE’s existing editor space instead of being displayed in a separate dialog box.

Type : `boolean`,

Default: false

## Example: basic setup

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

## `advcode_prettify_getcontent`

> **Note:** This feature is only available for TinyMCE 7.3 and later.
As part of the TinyMCE 7.3 release, the Enhanced Code Editor plugin includes a new option, `advcode_prettify_getcontent`, which is set to `false` by default.

When this option is set to `true` it will format the HTML code when `editor.getContent` is called.

This is equivalent to retrieving formatted content by calling `tinymce.activeEditor.getContent({ prettify: true })`, regardless of the option’s status.

**Type:** `Boolean`

**Default value:** `false`

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

## Example: basic setup

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

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

## `advcode_prettify_editor`

> **Note:** This feature is only available for TinyMCE 7.3 and later.
As part of the TinyMCE 7.3 release, the Enhanced Code Editor plugin includes a new option, `advcode_prettify_editor`, which is set to `true` by default.

By default, any code rendered inside **Enhanced Coded Editor** will be formatted with correct indentation.

Type : `boolean`,

Default: `true`

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

## Example: basic setup

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

> **Note:** To disable this default behavior, set the `advcode_prettify_editor` option to `false`.

## 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 | Enter |

## 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');
```