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.
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:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
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:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
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', {});
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.