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 state when opening and closing the code editor

The safest assumption is that selection state is not preserved when switching between the rich-text editor (ie, the default TinyMCE editor instance) to the code editor dialog view of a TinyMCE document.

Switching from the rich-text editor view to the code editor

If the current selection in the TinyMCE instance is collapsed (ie, is a flashing insertion point), the insertion point will be in the equivalent place when the code editor is opened.

If the current selection in the rich-text editor is an actual selection, that state is not preserved when switching to the code editor.

Instead, the insertion point in the code editor is placed at the beginning of what was the selection in the rich-text editor.

Switching from the code editor back to the rich-text editor view

When switching back from the code-view dialog to the rich-text editor, selection state is almost never preserved.

If you have a selection or a collapsed selection in the rich-text editor and

  1. open the code view dialog;

  2. make no changes; and

  3. exit the code view dialog by clicking Cancel (or pressing the Esc key);

the selection or collapsed selection will likely be preserved in the rich-text editor.

Otherwise, the selection state is not preserved on round-tripping from rich-text to code-view and back.

Instead, the insertion point is placed at the beginning of the editable block closest to the beginning of the TinyMCE document.

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');