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.

Export plugin

Export content from TinyMCE, into various formats.

Contribute to this page

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

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)

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:

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:

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:

Menu items

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

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

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.

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.

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.