Export plugin

Note: This feature is only available for TinyMCE 5.5 and later.
Note: 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.

<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/">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 paste lists advlist checklist link hr charmap directionality',
  toolbar: 'export pagebreak | formatselect fontselect fontsizeselect 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,
  toolbar_mode: 'sliding',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

Basic setup

To add the Export plugin to the editor, add export to the plugins option in the editor configuration.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'export',
  toolbar: 'export',
  export_image_proxy: 'proxy.php' // 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 option.
• 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 Checklist plugin icons will not render for Internet Explorer 11 users due to browser limitations.

The following plugins are not supported:

• BBCode
• Comments
• Enhanced Media Embed
• Fullpage
• Legacy Output
• Media
• Page Embed
• Table of Contents

Configuration Options

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

export_cors_hosts

The Export plugin cannot work with images from another domains 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.

Note: 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.

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

Type: String[]

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 getting images across domains using a local server-side proxy. A proxy is basically a script, that will retrieve a remote image and pipe it back to TinyMCE, as if it was a local image. An example of such a proxy (written in PHP) can be found below.

Paid TinyMCE subscriptions also includes a proxy service written in Java. Check the Install Server-side Components guide for details.

Note: export_image_proxy is not required when enabling this plugin via Tiny Cloud.

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

Example of a PHP script for the image proxy

<?php
// We recommend to extend this script with authentication logic
// so it can be used only by an authorized user
$validMimeTypes = array("image/gif", "image/jpeg", "image/png");

if (!isset($_GET["url"]) || !trim($_GET["url"])) {
    header("HTTP/1.0 500 Url parameter missing or empty.");
    return;
}

$scheme = parse_url($_GET["url"], PHP_URL_SCHEME);
if ($scheme === false || in_array($scheme, array("http", "https")) === false) {
    header("HTTP/1.0 500 Invalid protocol.");
    return;
}

$content = file_get_contents($_GET["url"]);
$info = getimagesizefromstring($content);

if ($info === false || in_array($info["mime"], $validMimeTypes) === false) {
    header("HTTP/1.0 500 Url doesn't seem to be a valid image.");
    return;
}

header('Content-Type:' . $info["mime"]);
echo $content;
?>

Toolbar buttons

The Export plugin provides the following toolbar buttons:

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 Export plugin provides the following menu items:

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 JavaScript commands.

Note: 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.

APIs

The Export plugin provides the following APIs.

Note: There are no settings available when using the ‘clientpdf’ format.

Examples

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

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.