NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Advanced Code Editor plugin

How to setup TinyMCE's Advanced Code Editor plugin.

Contribute to this page

+ toolbar button + menu item

Note: 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.io

The Code Plugin	The Advanced Code Editor Plugin
<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> > <strong>Source code</strong>.</li> <li>On the menu bar, open <strong>Tools</strong> > <strong>Source code</strong>.</li> <li>Click the <strong>Source code</strong> toolbar button.</li> </ul>	<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> > <strong>Source code</strong>.</li> <li>On the menu bar, open <strong>Tools</strong> > <strong>Source code</strong>.</li> <li>Click the <strong>Source code</strong> toolbar button.</li> </ul>

The Code Plugin

The Advanced Code Editor Plugin

 <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> > <strong>Source code</strong>.</li> <li>On the menu bar, open <strong>Tools</strong> > <strong>Source code</strong>.</li> <li>Click the <strong>Source code</strong> toolbar button.</li> </ul>

 <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> > <strong>Source code</strong>.</li> <li>On the menu bar, open <strong>Tools</strong> > <strong>Source code</strong>.</li> <li>Click the <strong>Source code</strong> toolbar button.</li> </ul>

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

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 toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

Menu items

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:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Commands

The Advanced Code plugin provides the following JavaScript command.

Command	Description
mceCodeEditor	Opens the code editor dialog.

Example

tinymce.activeEditor.execCommand('mceCodeEditor');

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.