此插件仅作为 付费附加组件 提供，需订阅 TinyMCE 服务。
导出为 PDF 功能收集通过 tinymce.editor.getContent() 方法生成的 HTML，并将其与默认编辑器内容样式以及插件配置中提供的样式相结合。合并后的内容和样式随后由包含的服务器端转换服务处理，该服务可以是自托管或基于云的。经过此处理后，会生成一个 PDF 文件，随后将其返回到用户的浏览器，使用户能够将其保存到磁盘或驱动器上。
向后兼容性和转换
该插件始终使用 v2 API 端点（/v2/convert/html-pdf）。支持两种选项格式：
扁平格式 – 顶层属性，例如
format、margin_top、header_html和footer_html。使用此格式的现有集成无需更改即可继续工作。在请求之前，插件会自动将扁平选项转换为嵌套结构。嵌套格式 – 设置
version: '2'以使用嵌套结构并访问每页页眉和页脚、PDF 元数据、安全性和数字签名等功能。
当配置为相同结果时，两种格式产生等效的输出。需要 TinyMCE 8.4.0 或更新版本以支持 v2 API 和自动转换。
交互式示例
HTML
<div style="display: flex; gap: 20px; width: 100%;">
<div style="flex: 1; min-width: 0;">
<h2>扁平格式（向后兼容）</h2>
<textarea class="exportpdf-flat" style="width: 100%;">
<h1>Streamline - 下一代学习管理系统 (LMS)</h1>
<p>本文档提供了 Streamline 学习管理系统 (LMS) 项目的全面概述。</p>
<figure class="image">
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="抛光木桌上放着一台笔记本电脑和一个青铜杯，营造出温暖的工作空间氛围" style="width: 100%; height: auto;">
<figcaption>一个优雅的工作空间，抛光木桌上放着一台笔记本电脑，旁边配有一个青铜杯，营造出温暖且富有成效的氛围。</figcaption>
</figure>
<p>照片由 <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> 在 <a href="https://unsplash.com">Unsplash</a> 上提供</p>
<h2>项目目标</h2>
<p>Streamline 旨在通过为教育者和学习者提供一个稳健且用户友好的平台来彻底改变在线学习。主要目标包括：</p>
<ul>
<li><strong>赋能教育者</strong>，提供用于内容创建、课程管理和学生评估的直观工具。</li>
<li><strong>提升学生的学习体验</strong>，通过引人入胜的内容交付、互动功能和个性化学习路径来实现。</li>
<li><strong>提高可访问性和可扩展性</strong>，以满足多样化的学习需求并支持不断增长的用户群。</li>
</ul>
<h2>系统功能</h2>
<p>Streamline 旨在通过一套全面的功能丰富学习过程：</p>
<ul>
<li><strong>内容管理系统 (CMS)</strong>：直观的界面，使教育者能够创建和上传各种学习材料，包括视频、文档、演示文稿和测验。</li>
<li><strong>课程管理工具</strong>：以清晰的目标构建课程，组织内容模块，并有效地管理学生注册。</li>
<li><strong>互动学习活动</strong>：包括游戏化、讨论论坛、协作作业等，以保持学生的参与度。</li>
<li><strong>评估与分析</strong>：用于创建测验、跟踪学生进度、生成报告以及识别改进领域的工具。</li>
<li><strong>个性化学习路径</strong>：机器学习算法根据学生的进度和需求提供量身定制的内容推荐。</li>
</ul>
<h3>表 1：Streamline - 目标用户群体</h3>
<table style="border-collapse: collapse; width: 100%;" border="1">
<thead>
<tr>
<th style="text-align: left;">用户群体</th>
<th style="text-align: left;">益处</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>教育者</strong></td>
<td>轻松创建内容、高效管理课程以及获得有价值的学生洞察。</td>
</tr>
<tr>
<td><strong>学习者</strong></td>
<td>引人入胜的学习体验、个性化的学习路径以及交互式协作。</td>
</tr>
<tr>
<td><strong>管理员</strong></td>
<td>可扩展的平台管理、用户访问控制以及全面的报告工具。</td>
</tr>
</tbody>
</table>
<h2>技术栈</h2>
<p>Streamline 将利用强大的技术栈以确保性能、可扩展性和安全性：</p>
<ul>
<li><strong>前端</strong>：使用 ReactJS 打造响应式且用户友好的界面。</li>
<li><strong>后端</strong>：使用 Node.js 进行高效的服务器端操作。</li>
<li><strong>数据库</strong>：使用 MongoDB 实现灵活且可扩展的数据存储。</li>
<li><strong>云平台</strong>：使用 Amazon Web Services (AWS) 进行可靠的托管和基础设施支持。</li>
</ul>
<h2>项目时间表</h2>
<ul>
<li><strong>第一阶段（2个月）</strong>：System 设计、核心功能开发以及前端原型创建。</li>
<li><strong>第二阶段（3 个月）</strong>：集成个性化学习和评估工具等高级功能。</li>
<li><strong>第三阶段（1 个月）</strong>：严格测试、错误修复和 UI 优化。</li>
<li><strong>第四阶段（持续进行）</strong>：部署、收集用户反馈以及持续的迭代开发。</li>
</ul>
<blockquote>
<p><em>此时间表为初步计划，可能会发生变化。</em></p>
</blockquote>
<h2>结论</h2>
<p>Streamline LMS 有望成为在线教育的变革者。通过赋能教育者并提升学生体验，其目标是让高效且易于获取的学习惠及所有人。</p>
</textarea>
</div>
<div style="flex: 1; min-width: 0;">
<h2>嵌套格式 (v2)</h2>
<textarea class="exportpdf-nested" style="width: 100%;">
<h1>Streamline - 下一代学习管理系统 (LMS)</h1>
<p>本文档提供了 Streamline 学习管理系统 (LMS) 项目的全面概述。</p>
<figure class="image">
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="抛光木桌上的笔记本电脑与青铜杯，营造出温暖的工作氛围" style="width: 100%; height: auto;">
<figcaption>一个优雅的工作空间，抛光木桌上放着笔记本电脑，旁边配有青铜杯，营造出温暖而富有成效的氛围。</figcaption>
</figure>
<p>照片由 <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> 在 <a href="https://unsplash.com">Unsplash</a> 上拍摄</p>
<h2>项目目标</h2>
<p>Streamline 旨在通过为教育者和学习者提供强大且用户友好的平台来彻底改变在线学习。主要目标包括：</p>
<ul>
<li><strong>赋能教育者</strong>，提供直观的工具用于内容创建、课程管理和学生评估。</li>
<li><strong>提升学生学习体验</strong>，通过引人入胜的内容交付、互动功能和个性化学习路径来实现。</li>
<li><strong>提高可访问性和可扩展性</strong>，以满足多样化的学习需求并支持不断增长的用户群。</li>
</ul>
<h2>系统功能</h2>
<p>Streamline 的设计旨在通过一套全面的功能丰富学习过程：</p>
<ul>
<li><strong>内容管理系统 (CMS)</strong>：直观的界面，使教育者能够创建和上传各种学习材料，包括视频、文档、演示文稿和测验。</li>
<li><strong>课程管理工具</strong>：构建具有明确目标的课程，组织内容模块，并有效管理学生注册。</li>
<li><strong>互动学习活动</strong>：包括游戏化、讨论论坛、协作作业等，以保持学生的参与度。</li>
<li><strong>评估与分析</strong>：用于创建测验、跟踪学生进度、生成报告以及确定改进领域的工具。</li>
<li><strong>个性化学习路径</strong>：机器学习算法根据学生的进度和需求提供量身定制的内容推荐。</li>
</ul>
<h3>表 1：Streamline - 目标用户群体</h3>
<table style="border-collapse: collapse; width: 100%;" border="1">
<thead>
<tr>
<th style="text-align: left;">用户群体</th>
<th style="text-align: left;">收益</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>教育者</strong></td>
<td>轻松的内容创建、高效的课程管理以及有价值的学生洞察。</td>
</tr>
<tr>
<td><strong>学习者</strong></td>
<td>引人入胜的学习体验、个性化的学习路径以及交互式协作。</td>
</tr>
<tr>
<td><strong>管理员</strong></td>
<td>可扩展的平台管理、用户访问控制、d comprehensive reporting tools.</td>
</tr>
</tbody>
</table>
<h2>Technology Stack</h2>
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
<ul>
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
</ul>
<h2>Project Timeline</h2>
<ul>
<li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
</ul>
<blockquote>
<p><em>This timeline is preliminary and may be subject to change.</em></p>
</blockquote>
<h2>Conclusion</h2>
<p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
</textarea>
</div>
</div>JS
tinymce.init({
selector: 'textarea.exportpdf-flat',
height: '800px',
plugins: [
"exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
"help", "image", "insertdatetime", "link", "lists", "media",
"preview", "searchreplace", "table", "visualblocks",
],
toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
image_caption: true,
exportpdf_converter_options: {
format: 'A4',
margin_top: '1in',
margin_right: '1in',
margin_bottom: '1in',
margin_left: '1in'
}
});
tinymce.init({
selector: 'textarea.exportpdf-nested',
height: '800px',
plugins: [
"exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
"help", "image", "insertdatetime", "link", "lists", "media",
"preview", "searchreplace", "table", "visualblocks",
],
toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
image_caption: true,
exportpdf_converter_options: {
version: '2',
document: {
size: 'A4',
orientation: 'portrait',
margins: {
top: '1in',
right: '1in',
bottom: '1in',
left: '1in',
enable_mirror_margins: true
}
},
metadata: {
title: 'Streamline LMS Overview',
author: 'TinyMCE',
subject: 'Learning Management System',
keywords: [ 'LMS', 'education', 'Streamline' ]
}
}
});使用 Tiny Cloud 服务进行基本设置
要将 Export to PDF 插件添加到编辑器中，请在编辑器配置的 plugins 选项中添加 exportpdf。
tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
// Required for the cloud-based Export to PDF plugin with Tiny Cloud
// Create a JWT key in the Customer Portal for trial functionality to enable watermark-free exports during the trial period
exportpdf_token_provider: () => {
return fetch('http://localhost:3000/jwt', { // specify your token endpoint
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});有关将此插件与模块打包器捆绑的信息，请参阅 Bundling TinyMCE - Overview。
有关 exportpdf_token_provider 选项的更多信息，请参阅 exportpdf_token_provider。
使用 Tiny Cloud 服务时，Export to PDF 插件需要 JWT 认证。
认证设置：
在客户门户中创建 JWT 密钥
配置
exportpdf_token_provider选项以指定检索 JWT 令牌的端点有关如何使用 Export to PDF 设置 JWT 认证的更多信息，请参阅示例：使用 JWT 认证进行 PDF 导出（Node.js） 或 使用 JWT 认证进行 PDF 导出（PHP）
试用期行为
试用期：
使用 JWT：完整功能，无限使用，无水印。
不使用 JWT：完整功能但带有水印。
试用期后：
使用 Export to PDF 附加组件 + JWT：完整功能（基于订阅）
不使用附加组件：插件权限被
disabled，功能不再可用。访问 账户门户 以获取您的 JWT 密钥并测试完整功能。
在防火墙或正向代理后使用云服务时，请确保将 *.tiny.cloud 加入白名单，并且不剥离必需的 HTTP 标头。有关详细信息，请参阅 防火墙和代理白名单。使用自托管服务的基本设置
要使用 Export to PDF 插件的自托管版本，您需要将 exportpdf_service_url 选项设置为服务的 URL。
tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_service_url: 'http://localhost:8080/' // Update with the URL of the service you are using such as 'http://myserver.com/'
});
exportpdf_service_url选项会自动在提供的 URL 后追加/v2/convert/html-pdf，因此只需要提供基础 URL。例如，如果服务托管在http://localhost:8080/v2/convert/html-pdf，则应将exportpdf_service_url选项设置为http://localhost:8080/。在生产环境中使用时，请确保将exportpdf_service_url更新为生产 URL，例如https://myserver.com/。
其他配置
分页支持为确保导出的文档中分页符正常工作，请配置
pagebreak_separator和pagebreak_split_block选项：tinymce.init({ selector: 'textarea', plugins: 'exportpdf', toolbar: 'exportpdf', pagebreak_separator: '<div style="break-after: page"></div>', pagebreak_split_block: true, // ... other configuration options });对于 PDF 导出，请确保内容包含适当的分页元素，这些元素将被转换为 PDF 分页符。
导出特定的内容过滤
为了生成用于导出的内容，Export to PDF 插件调用 tinymce.editor.getContent() 方法，并将 export 属性设置为 pdf。TinyMCE 将此 export 属性添加到 GetContent 事件以及序列化器节点过滤器数据中。序列化器节点过滤器或 GetContent 事件处理程序可以读取 export 属性，以便仅在 Export to PDF 导出期间过滤内容，而不改变标准 tinymce.editor.getContent() 调用的结果。
以下序列化器节点过滤器会在 Export to PDF 导出期间移除 footer 元素：
editor.serializer.addNodeFilter('footer', (nodes, name, args) => {
if (args.export === 'pdf') {
nodes.forEach((node) => node.remove());
}
});GetContent 事件处理程序也可以读取相同的 export 属性：
editor.on('GetContent', (e) => {
if (e.export === 'pdf') {
e.content = removeFooterFromHtml(e.content);
}
});选项
以下配置选项会影响 Export to PDF 插件的行为。
exportpdf_service_url
Export to PDF 插件使用 HTML 转 PDF 转换服务来生成 document-name.pdf 文件。
在为 on-premise（本地部署）环境配置 Export to PDF 插件时，此选项是必需的。如果您需要访问此功能，请联系我们。有关使用 Docker 部署 Export to PDF 服务端组件的详细指南，请参阅本地部署文档。
本地部署需要支持 v2 API（
/v2/convert/html-pdf）的 Docker 镜像版本。若要使用 TinyMCE 8.4.0 或更新版本的“导出为 PDF”插件，请升级到最新镜像或兼容 v2 的版本。
使用自定义主机时，请在 TinyMCE 配置中设置exportpdf_service_url选项以匹配您的主机。例如，如果您的自定义主机是mycustomhost.com，请将 URL 设置为https://mycustomhost.com/。
类型： String
示例：设置 exportpdf_service_url
tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_service_url: '<service_url>' // 仅本地部署时需要
});exportpdf_token_provider
exportpdf_token_provider 选项启用与基于令牌的认证服务的集成，用于导出 PDF 文档。它提供了一种从指定端点获取认证令牌的机制。这确保导出过程能够安全地与服务器通信。
类型： Function
默认值： undefined
返回数据： Token 对象
示例：使用 exportpdf_token_provider
tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_token_provider: () => { // 在 Tiny Cloud 中使用“导出为 PDF”插件时必需。
return fetch('http://localhost:3000/jwt', { // 指定您的令牌端点
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});JWT 令牌的数据结构
包含有效编码令牌的对象必须符合以下结构：
{
token: "<encoded JWT string>"
}| 字段 | 类型 | 是否必填？ | 描述 |
|---|---|---|---|
|
| required | 用于身份验证和授权的 Base64 编码 JSON Web Token (JWT)。 |
exportpdf_converter_options
配置页面布局、页眉、页脚及其他 PDF 输出选项。编辑器在导出时会将此配置发送给转换服务。
类型： Object
应使用哪种格式
扁平格式 – 适用于现有集成（无需更改）或当偏好简单结构时使用。属性如
format、margin_top、header_html位于顶层。嵌套格式 – 适用于新集成，或当需要每页页眉、PDF 元数据、安全性或数字签名时使用。设置
version: '2'并将选项组织在document、headers、footers、metadata下。
两种格式使用相同的 API 端点。扁平格式的选项会在请求前自动转换为嵌套结构。
需要 TinyMCE 8.4.0 或更新版本。本地部署需要支持 v2 API 的 Docker 镜像版本。
扁平格式
顶层属性：format、margin_top、margin_right、margin_bottom、margin_left、header_html、footer_html、header_and_footer_css、page_orientation、wait_for_network、wait_time、base_url、extra_http_headers。为了向后兼容而支持。
自 TinyMCE 7.5.0 起，exportpdf_converter_options 设置现在附带以下默认值：默认值（扁平格式）：{
format: 'Letter',
margin_top: '1in',
margin_right: '1in',
margin_bottom: '1in',
margin_left: '1in'
}示例：扁平格式tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_service_url: '<service_url>', // 如果使用本地服务则必需
exportpdf_converter_options: {
header_html: '<p>HEADER</p>', // 示例
header_and_footer_css: 'p { color: blue }', // 示例
},
})嵌套格式
设置 version: '2' 以使用嵌套结构。访问每页页眉和页脚、PDF 元数据、安全性和数字签名。
{
version: '2',
document: {
size: 'Letter',
margins: {
top: '1in',
right: '1in',
bottom: '1in',
left: '1in'
}
}
}主要选项组：
| Option | Description |
|---|---|
| 页面大小、方向和边距 |
| 每页的页眉和页脚（ |
| PDF 元数据（ |
其他选项：
rendering–wait_for_network、wait_timesecurity–owner_password（密码保护）signature–certificate、certificate_password（数字签名；不能与security同时使用）base_url、extra_http_headers、disable_compression
有关完整详细信息，请参阅 PDF Converter API 文档。
示例：每页页眉和页脚tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_service_url: '<service_url>',
exportpdf_converter_options: {
version: '2',
document: {
size: 'Letter',
orientation: 'portrait',
margins: {
top: '2cm',
bottom: '2cm',
left: '1cm',
right: '3cm',
enable_mirror_margins: true
}
},
headers: {
default: { html: '<p>HEADER</p>', css: 'p { color: blue }' },
first: { html: '<p>FIRST PAGE</p>', css: 'p { font-weight: bold }' }
},
footers: {
default: { html: '<p>FOOTER</p>', css: 'p { color: green }' }
}
},
});示例：元数据tinymce.init({
selector: 'textarea',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_converter_options: {
version: '2',
metadata: {
title: 'My Document',
author: 'John Doe',
subject: 'Quarterly Report',
keywords: [ 'report', '2024', 'sales' ],
custom_fields: { 'Department': 'Sales' }
}
}
});必须配置 exportpdf_service_url 选项，以便导出到 PDF 插件正常工作。有关全面详细信息，请参阅 PDF Converter API 文档。有关从扁平格式迁移到嵌套格式的指南，请参阅 迁移指南。
exportpdf_converter_style
exportpdf_converter_style 选项允许自定义应用于导出的 PDF 文档的样式，从而提供对其外观的控制灵活性。
类型： String
默认值： ''
示例：使用 exportpdf_converter_style
tinymce.init({
selector: 'textarea.tinymce',
plugins: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_service_url: '<service_URL>', // required if using On-premises service
exportpdf_converter_options: { // required to support "exportpdf_converter_style"
header_html: '<h1>First page header.</h1>',
header_and_footer_css: 'h1 { font-size: 30px; }'
},
exportpdf_converter_style: 'p { color: cyan !important }' // requires both "exportpdf_converter_style" and "exportpdf_service_url" to be set.
});可以使用 CSS 为导出的 PDF 文档添加水印。
将水印样式添加到
exportpdf_converter_style选项中，针对body::after而不是#tinymce::after以确保正确渲染。更多信息请参见：General/CSS。
示例：为导出的 PDF 文档添加水印
exportpdf_converter_style: `
body::after {
content: "CONFIDENTIAL";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 48px;
color: rgba(0, 0, 0, 0.1);
z-index: 1000;
pointer-events: none;
}
`工具栏按钮
Export to PDF 插件提供以下工具栏按钮：
| 工具栏按钮标识符 | 描述 |
|---|---|
| 直接从编辑器生成 PDF 文件。 |
可以使用以下方式将这些工具栏按钮添加到编辑器中：
toolbar配置选项。quickbars_insert_toolbar配置选项。
菜单项
Export to PDF 插件提供以下菜单项：
| 菜单项标识符 | 默认菜单位置 | 描述 |
|---|---|---|
| 导出为 PDF | 直接从编辑器生成 PDF 文件。 |
可以使用以下方式将这些菜单项添加到编辑器中：
menu配置选项。contextmenu配置选项。
命令
Export to PDF 插件提供以下 TinyMCE 命令。
| 命令 | 描述 |
|---|---|
ExportPDF | 使用文件名 |
tinymce.activeEditor.execCommand('ExportPDF');API 参考
请在 Export to PDF API 参考文档 中探索 Export to PDF Premium 插件的全面 API 文档。