---
title: "Code plugin"
description: "Edit your content's HTML source."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/code/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/code/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 646
---
# Code plugin

This plugin adds a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view. It also adds the menu item `Source code` under the `Tools` menu.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'code',
  toolbar: 'code',
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Selection behavior in code editors

When switching between the rich-text editor and code editor views, selection state behavior varies depending on the direction of the switch and whether changes are made.

### From rich-text editor to code editor

**Collapsed selection (cursor position):** When the cursor is positioned at a specific location in the rich-text editor, the code editor will open with the cursor at the equivalent position in the HTML source.

**Text selection:** When text is selected in the rich-text editor, the selection is not preserved in the code editor. Instead, the cursor is positioned at the beginning of the selected content in the HTML source.

### From code editor back to rich-text editor

**No changes made:** If no changes are made in the code editor and you click **Cancel** or press **Esc**, the original selection state or cursor position in the rich-text editor is preserved.

**Changes made:** When changes are made in the code editor and you click **OK** or **Save**, the selection state or cursor position is **not** preserved. The cursor is positioned at the beginning of the document content.

> **Note:** Selection state preservation is not guaranteed when switching between editor views. For the most reliable editing experience, make changes in one view before switching to the other.

## Toolbar buttons

The Code 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`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Code plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `code` | View | Opens the code dialog. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Code plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceCodeEditor | Opens the code editor dialog. |

Example
```js
tinymce.activeEditor.execCommand('mceCodeEditor');
```