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 (Export icon: A page with an arrow from the center of the page to the right of the page) and select PDF.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

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

Getting started with TinyMCE Export

Creating a Tiny Cloud account

Try the Export plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.

Get TinyMCE Export

The Export plugin is included in the following Tiny Cloud plans:

A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.

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:

  1. Add export to the plugins option in the editor configuration.

  2. 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://mydomain.com/imageproxy' // Required for rendering remote images
});

Exporters

The Export plugin provides the following exporters:

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 mydomain.com. Do not include protocols (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: [ 'mydomain.com', 'otherdomain.com' ]
});

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://mydomain.com/ephox-image-proxy/'
});

Toolbar buttons

The Export plugin provides the following toolbar buttons:

Toolbar button identifier Description

export

Downloads the content from the editor in the selected format.

These toolbar buttons can be added to the editor using:

The Export plugin provides the following menu items:

Menu item identifier Default Menu Location Description

export

File

Downloads the content from the editor in the selected format.

These menu items can be added to the editor using:

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.

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.

APIs

The Export plugin provides the following APIs.

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.

There are no settings available when using the 'clientpdf' format.
Examples
tinymce.activeEditor.plugins.export.convert('clientpdf', {});
tinymce.activeEditor.plugins.export.download('clientpdf', {});