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 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
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> > <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>
</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> > <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>
</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.
Example: basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: '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 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 |
---|---|
|
Opens the code dialog. |
These toolbar buttons can be added to the editor using:
-
The
toolbar
configuration option. -
The
quickbars_insert_toolbar
configuration option.
Menu items
The Advanced Code Editor plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
|
View |
Opens the code dialog. |
These menu items can be added to the editor using:
-
The
menu
configuration option. -
The
contextmenu
configuration option.