---
title: "Advanced Code Editor plugin"
description: "How to setup TinyMCE's Advanced Code Editor plugin."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advcode/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/advcode/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 418
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advcode/).
# Advanced Code Editor plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing).
This plugin adds a toolbar button that allows a user to edit the HTML code using a more advanced [code editor](../enterprise-advcode/) 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

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

**Example**

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