Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Preview plugin

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

Contribute to this page
+ 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:

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:

Commands

The Preview plugin provides the following JavaScript command.

Command Description
mcePreview Displays a preview of the editor contents.

Example

tinymce.activeEditor.execCommand('mcePreview');

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.