Preview plugin

Shows a popup of the current content in read-only format.

+ toolbar button + menu item

This plugin adds a preview button to the toolbar. Pressing the button opens a dialog box showing the current content in a preview mode. It also adds a menu item Preview under the File and View menu dropdowns.

Basic setup

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

Toolbar buttons

The Preview plugin provides the following toolbar buttons:

Toolbar button identifier	Description
`preview`	Previews the current editor contents.

These toolbar buttons can be added to the editor using:

The toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

Menu items

The Preview plugin provides the following menu items:

Menu item identifier	Default Menu Location	Description
`preview`	File	Previews the current document.

These menu items can be added to the editor using:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Commands

The Preview plugin provides the following JavaScript command.

Command	Description
mcePreview	Displays a preview of the editor contents.

Example

tinymce.activeEditor.execCommand('mcePreview');

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

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.