Export plugin

This plugin is only available for paid TinyMCE subscriptions.

The Export plugin adds the ability to export content from the editor to a user’s local machine in various formats. For a list of available exporters and information on what they support, see the Exporters section.

Interactive example

To export the editor content, either:

From the File menu, click Export and select PDF.
Click the Export toolbar button () and select PDF.

TinyMCE
HTML
JS
Edit on CodePen

<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

<h2>Got questions or need help?</h2>

<ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

<h2>A simple table to play with</h2>

<table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

<h2>Found a bug?</h2>

<p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

<h2>Finally ...</h2>

<p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>

<textarea id="export">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <p><!-- pagebreak --></p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

tinymce.init({
  selector: 'textarea#export',
  plugins: 'export pagebreak code emoticons image table lists advlist checklist link charmap directionality',
  toolbar: 'export pagebreak | blocks fontfamily fontsize | bold italic underline strikethrough | forecolor backcolor | subscript superscript | alignleft aligncenter alignright alignjustify indent outdent rtl ltr | bullist numlist checklist | emoticons image table link hr charmap',
  height: 500,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Cloud Installation

The Export plugin is provided with all subscriptions to Tiny Cloud, including an automatically configured image proxy. To add the Export plugin to the editor, add export to the plugins option in the editor configuration.

Basic setup using Tiny Cloud

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

Self-hosted Installation

To add the Export plugin to the editor:

Add export to the plugins option in the editor configuration.
Enable the export_image_proxy or export_image_proxy_service_url options as required.

Basic self-hosted setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'export',
  toolbar: 'export',
  export_image_proxy_service_url: 'http://example.com/imageproxy' // Required for rendering remote images
});

Exporters

The Export plugin provides the following exporters:

Client-side PDF (clientpdf)

Client-side PDF (`clientpdf`)

The client-side PDF exporter converts the editor content to a PDF without the need for server-side components. This exporter will resize the content to fit on A4 pages, add page breaks, take a snapshot of the HTML, and embed the snapshot image within the exported PDF.

This exporter has a few limitations or known issues that should be noted:

The text content in the PDF cannot be selected or copied.
A single line of content sliced horizontally and distributed across separate pages.
Due to browser limitations, there is a limit on the number of pages that can be rendered. The number of pages varies between browsers.
Remote images require an image proxy to render due to browser limitations. For information on proxying remote images, see the export_image_proxy or export_image_proxy_service_url options.
Right-to-left languages that use cursive scripts (such as Arabic) may not render correctly due to an issue with how the image of the HTML content is rendered.

The following plugins are not supported:

Options

The following configuration options affect the behavior of the Export plugin.

`export_cors_hosts`

The Export plugin cannot work with images from another domain due to security measures imposed by browsers on so called cross-origin HTTP requests. To overcome these constraints, Cross-Origin Resource Sharing (CORS) must be explicitly enabled on the specified domain(s) (for more information check HTTP access control).

An array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via the export_cors_hosts option.

Each string in the array must be in the format of example.com. Do not include protocols (for example, http://, https://) or any trailing slashes in your domains.

export_cors_hosts is not required when enabling this plugin via Tiny Cloud.

Type: Array

Default value: []

Example: `export_cors_hosts`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'export',
  plugins: 'image export',
  export_cors_hosts: [ 'example.com', 'example.net' ]
});

`export_ignore_elements`

This option takes an array of HTML element names and allows specific HTML elements to be excluded from the exported content. This can be used to exclude HTML elements that may cause issues with exported content, such as video or audio elements.

Type: Array

Default value: []

Example: `export_ignore_elements`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'export',
  toolbar: 'export',
  export_ignore_elements: [ 'iframe', 'video', 'audio' ]
});

`export_image_proxy`

This option can be used as a way of editing images across domains using a third-party local server-side proxy. A proxy is a script, that will retrieve a remote image and pipe it back to TinyMCE, as if it was an image hosted on the same domain.

export_image_proxy is not required when enabling this plugin via Tiny Cloud. If using the self-hosted Java proxy service provided as part of Paid TinyMCE subscriptions, use the export_image_proxy_service_url option instead.

Type: String

Example: using `export_image_proxy`

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'export',
  plugins: 'image export',
  export_image_proxy: 'proxy.php'
});

`export_image_proxy_service_url`

This option configures the URL to the server-side proxy service which allows remote images hosted on different domains to be retrieved by the Export plugin. If a proxy is not configured, then remote images may not be able to be exported. Check the Install Server-side Components guide for details on configuring the self-hosted Java proxy service.

export_image_proxy_service_url is not required when enabling this plugin via Tiny Cloud.

Type: String

Example: using `export_image_proxy_service_url`

tinymce.init({
  selector: 'textarea',
  plugins: 'image export',
  export_image_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});

The Export plugin provides the following toolbar buttons:

Toolbar button identifier Description

Toolbar button identifier	Description
`export`	Downloads the content from the editor in the selected format.

export

Downloads the content from the editor in the selected format.

These toolbar buttons can be added to the editor using:

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

The Export plugin provides the following menu items:

Menu item identifier Default Menu Location Description

Menu item identifier	Default Menu Location	Description
`export`	File	Downloads the content from the editor in the selected format.

export

File

Downloads the content from the editor in the selected format.

These menu items can be added to the editor using:

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

Commands

The Export plugin provides the following TinyMCE commands.

Command	Description
mceExportDownload	Converts the editor content using the specified exporter format and downloads the converted content.

Command

Description

mceExportDownload

Converts the editor content using the specified exporter format and downloads the converted content.

There are no settings available when using the 'clientpdf' format.

Examples

tinymce.activeEditor.execCommand('mceExportDownload', false, {
  format: 'clientpdf',
  settings: {}
});

Events

The Export plugin provides the following events.

The following event are provided by the Export plugin.

Name	Data	Description
ExportPdf	N/A	Fired when the editor content is about to be exported as a PDF.

Name

Data

Description

ExportPdf

N/A

Fired when the editor content is about to be exported as a PDF.

APIs

The Export plugin provides the following APIs.

Name Arguments Description

Name	Arguments	Description
convert	format: string, settings: Object	Converts the editor content using the specified exporter format and returns a `Promise` that once resolved will contain the exported content.
download	format: string, settings: Object	Converts the editor content using the specified exporter format and downloads the converted content.

convert

format: string, settings: Object

Converts the editor content using the specified exporter format and returns a Promise that once resolved will contain the exported content.

download

format: string, settings: Object

Converts the editor content using the specified exporter format and downloads the converted content.

There are no settings available when using the 'clientpdf' format.

Examples

tinymce.activeEditor.plugins.export.convert('clientpdf', {});
tinymce.activeEditor.plugins.export.download('clientpdf', {});

Export plugin

Interactive example

Cloud Installation

Basic setup using Tiny Cloud

Self-hosted Installation

Basic self-hosted setup

Exporters

Client-side PDF (clientpdf)

Options

export_cors_hosts

Example: export_cors_hosts

export_ignore_elements

Example: export_ignore_elements

export_image_proxy

Example: using export_image_proxy

export_image_proxy_service_url

Example: using export_image_proxy_service_url

Toolbar buttons

Menu items