Advanced Code Editor plugin

This plugin is only available for paid TinyMCE subscriptions.

The Advanced 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.

For the Advanced Code Editor to offer a full-screen mode requires the Full screen plugin and requires Advanced Code Editor to be running in inline mode.

The difference between the Code and Advanced Code Editor plugins

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

The Code Plugin

The Advanced Code Editor Plugin

 
<table>
  <thead>
    <tr>
      <th style="width: 50%;"><h2>The Code Plugin</h2></th>
      <th style="width: 50%;"><h2>The Advanced Code Editor Plugin</h2></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 50%;">
        <textarea class="codedemo">
          <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>
      </td>
      <td style="width: 50%;">
        <textarea class="advcodedemo">
          <p>The Advanced 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 Advanced Code Editor to offer a full-screen mode requires the <a href="https://tiny.cloud/docs/tinymce/6/fullscreen">Full screen</a> plugin and requires the Advanced Code Editor to be running in <a href="https://tiny.cloud/docs/tinymce/6/advcode/#advcode_inline">inline mode</a>.</p>
          <p>To open the Advanced 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>
      </td>
    </tr>
  </tbody>
</table>
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 }'
});

Getting started with TinyMCE Advanced Code Editor

Creating a Tiny Cloud account

Try the Advanced Code Editor plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.

Get TinyMCE Advanced Code Editor

The Advanced Code Editor plugin is included in the following Tiny Cloud plans:

A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.

Example: basic setup

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

Example: enable the Advanced Code Editor full-screen mode button

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

advcode_inline

This feature is only available for TinyMCE 6.3 and later.

As part of the TinyMCE 6.3 release, the Advanced Code Editor plugin includes a new option, advcode_inline, that allows users to open the Advanced Code Editor within TinyMCE’s existing editor space instead of being displayed in a separate dialog box.

Type : boolean,

Default: false

Example: basic setup

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

Advanced Code Editor search and replace keyboard shortcuts

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

Action PC Mac

Find

Ctrl+F

Command+F

Find next instance

Ctrl+G

Command+G

Find previous instance

Shift+Ctrl+G

Shift+Command+G

Replace

Ctrl+H

Command+Option+F

Replace All

Shift+Ctrl+R

Shift+Command+Option+F

Toolbar buttons

The Advanced 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 Advanced 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 Advanced Code plugin provides the following TinyMCE command.

Command Description

mceCodeEditor

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