Advanced source code editing

An IDE-like code editor for TinyMCE.

+ toolbar button + menu item

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 it’s a very useful add-on for power users. It comes with many features often found in IDEs, all enabled by default:

Syntax color highlighting
Bracket matching
Code folding
Multiple selections/carets
Search and Replace

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>

Getting started with TinyMCE Advanced Code Editor

Creating an 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.

Further information

For information on:

Tiny Cloud plans, see: Tiny Pricing Plans.
Configuring the Advanced Code Editor plugin, see: The Advanced Code Editor plugin documentation.

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.