Important changes to Tiny Cloud pricing > Find out more

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
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

The Code Plugin

The Advanced Code Editor Plugin

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

Commands

The Advanced Code plugin provides the following JavaScript command.

Command Description
mceCodeEditor Opens the code editor dialog.

Example

tinymce.activeEditor.execCommand('mceCodeEditor');

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.