Enhanced Code Editor plugin

This plugin is only available for paid TinyMCE subscriptions.

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

Full-screen mode requires the Full screen plugin and the Enhanced Code Editor to be running in inline mode.

The difference between the Code and Enhanced Code Editor plugins

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

The Code Plugin

The Enhanced Code Editor Plugin

<div style="display: flex; gap: 20px; width: 100%;">
  <div style="flex: 1; min-width: 0;">
    <h2>The Code Plugin</h2>
    <textarea class="codedemo" style="width: 100%;">
      <p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
      <p>To open the Code dialog:</p>
      <ul>
        <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
        <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
        <li>Click the <strong>Source code</strong> toolbar button.</li>
      </ul>
    </textarea>
  </div>
  <div style="flex: 1; min-width: 0;">
    <h2>The Enhanced Code Editor Plugin</h2>
    <textarea class="advcodedemo" style="width: 100%;">
      <p>The Enhanced Code Editor (<code>advcode</code>) plugin provides the same dialog as the code (<code>code</code>) plugin, but with the following additional features:</p>
      <ul>
        <li>Syntax highlighting.</li>
        <li>Element matching and closing.</li>
        <li>Code folding.</li>
        <li>Multiple selections/carets.</li>
        <li>Search and replace.</li>
        <li>Dark or light mode for code display.</li>
        <li>Increase and decrease display font size.</li>
        <li>Full-screen mode.</li>
      </ul>
      <p>For the Enhanced Code Editor to offer a full-screen mode requires the <a href="https://tiny.cloud/docs/tinymce/latest/fullscreen">Full screen</a> plugin and requires the Enhanced Code Editor to be running in <a href="https://tiny.cloud/docs/tinymce/latest/advcode/#advcode_inline">inline mode</a>.</p>
      <p>To open the Enhanced Code Editor dialog:</p>
      <ul>
        <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
        <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
        <li>Click the <strong>Source code</strong> toolbar button.</li>
      </ul>
    </textarea>
  </div>
</div>
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

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

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:

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.

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
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: ["fullscreen", "advcode"],
  toolbar: "code",
  advcode_inline: true,
});
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
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_getcontent: true,
});
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.
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
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)
tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_editor: true, // default value
});
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.

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 Enhanced Code Editor plugin provides the following menu items:

Menu item identifier Default Menu Location Description

code

View

Opens the code dialog.

These menu items can be added to the editor using:

Commands

The Enhanced Code Editor plugin provides the following TinyMCE command.

Command Description

mceCodeEditor

Opens the code editor dialog.
Example
tinymce.activeEditor.execCommand('mceCodeEditor');