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

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

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.

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 Code plugin provides the following menu items:

Menu item identifier Default Menu Location Description

code

View

Opens the code dialog.

These menu items can be added to the editor using:

Commands

The Code plugin provides the following TinyMCE command.

Command Description

mceCodeEditor

Opens the code editor dialog.
Example
tinymce.activeEditor.execCommand('mceCodeEditor');