Advanced Code Editor plugin

This plugin is only available for paid TinyMCE subscriptions.

This plugin adds a toolbar button that allows a user to edit the HTML code using a more advanced code editor than the default textarea.

If you are using Advanced Code Editor advcode plugin, make sure you do not use Code (code) plugin.

Example: Basic setup

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

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>
              </ul>
              <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:14px }'
});

tinymce.init({
  selector: 'textarea.codedemo',
  plugins: 'code',
  toolbar: 'code',

  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

Advanced Code Editor search and replace keyboard shortcuts

Advanced Code Editor provides the following shortcuts for search and replace 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