---
title: "Preview plugin"
description: "Shows a popup of the current content in read-only format."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/preview/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/preview/index.md"
version: "6"
last_updated: "2022-03-30T07:08:51Z"
tokens: 409
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/preview/).
# Preview plugin

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

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'preview',
  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`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Preview plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `preview` | File | Previews the current document. |

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 Preview plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mcePreview | Displays a preview of the editor contents. |

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