此插件仅适用于付费 TinyMCE 订阅。

概述

Media Optimizer 的 Files and Documents 功能插件中的文档(Documents)功能,允许用户通过 Link 插件的对话框,直接在编辑器内上传并链接文档文件(如 PDF、Word、Excel、PowerPoint 等)。当同时启用 Media Optimizer 的 Files and Documents 功能插件和 Link 插件时,该插件会自动配置必要的选项,以在链接对话框中启用文件上传。

主要优势

  • 直接在编辑器内上传并链接文档文件

  • 支持多种文件类型,包括文档、iWork 文件、音频文件和压缩包

  • 当两个插件均启用时,自动配置文件上传处理程序

  • 通过 Uploadcare 的基础设施实现安全的文件上传

  • 可自定义支持的文件类型列表

  • 支持拖放文件上传

  • 支持基于 URL 的文件链接

交互示例

HTML

<textarea id="uploadcare-documents">
  <h1>简化您的文档工作流程:专业文件管理变得简单</h1>
  <p><span style="color: #4e5c73;">在当今的数字工作空间中,高效管理文档不仅是一种便利,更是提高生产力的关键。无论是共享报告、分发资源还是链接重要文件,Media Optimizer 插件都能改变您处理文档上传和文件管理的方式。&nbsp;</span></p>
  <p>通过 Link 插件对话框的无缝集成,上传和链接文档从未如此轻松。只需点击“链接”按钮,导航至“上传”选项卡,您的文件将通过 Uploadcare 的安全基础设施进行处理——几秒钟内即可准备就绪进行共享。</p>
  <blockquote><em>“文档文件上传已成为现代内容管理的基石,使团队能够轻松共享资源,同时保持专业标准,”</em> —— Digital Solutions Inc. 内容战略总监 Sarah Chen</blockquote>
  <p>根据最近的工作流程分析,实施简化文档上传流程的团队在内容创建效率方面平均提高了 40%。这种增强的生产力,结合安全的文件处理和自动优化,使得文档文件上传成为任何内容管理系统不可或缺的功能。&nbsp;</p>
  <h2>体验无缝文档上传</h2>
  <p class="p1">在探讨全面的文件类型支持之前,让我们先了解文档上传在实际操作中是如何工作的。</p>
  <p class="p1">当 uploadcare 和 link 插件均启用时,Media Optimizer 插件会自动配置您需要的一切。只需选择文件,它便会自动上传、处理并链接——无需复杂的设置。</p>
  <h2 class="p1">全面的文件类型支持:按您的方式管理文档&nbsp;</h2>
  <p>Media Optimizer 插件支持广泛的文件类型,确保您可以上传和链接团队所需的几乎任何文档:</p>
  <ul>
    <li><strong>办公文档:</strong> PDF、Word (doc, docx)、Excel (xls, xlsx)、PowerPoint (ppt, pps, pptx)、RTF 和纯文本文件</li>
    <li><strong>iWork 文件:</strong> Keynote 演示文稿、Pages 文档和 Numbers 电子表格</li>
    <li><strong>音频文件:</strong> WAV、MP3 和 OGG 格式,用于多媒体内容</li>
    <li><strong>归档文件:</strong> ZIP、GZIP、TAR、TAR.GZ、7Z 和 RAR,用于压缩内容分发</li>
  </ul>
  <p>这种全面的支持意味着您可以通过单一的统一界面处理从季度报告和演示文稿到音频指南和资源归档的所有内容。</p>
  <h2>实际应用场景</h2>
  <p>文档文件上传非常适合各种专业场景:</p>
  <ul>
    <li><strong>知识库管理:</strong> 共享技术文档、用户指南和参考资料</li>
    <li><strong>资源分发:</strong> 提供可下载的白皮书、案例研究和营销材料</li>
    <li><strong>协作工作流:</strong> 使团队成员能够上传和共享项目文件、模板和资产</li>
    <li><strong>内容增强:</strong> 链接补充材料、音频指南和多媒体资源</li>
  </ul>
  <p>每个上传的文件都通过 Uploadcare 的企业级基础设施进行处理,确保为您的用户提供安全存储、快速交付和可靠访问。</p>
  <h2>立即开始</h2>
  <p>准备好改变您的文档管理工作流程了吗?现在尝试使用工具栏中的“链接”按钮上传文档。点击“链接”按钮,选择“上传”选项卡,体验专业文件管理的简便性。</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview",
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

基本设置

要启用文档文件上传,请在编辑器配置的 plugins 选项中同时包含 uploadcare 和 link。Media Optimizer 的 Files and Documents 功能插件将自动配置必要的选项,以在链接对话框中启用文件上传。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: 'link',
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

有关使用模块打包器捆绑此插件的信息,请参阅 Bundling TinyMCE - Overview。

当 Link 插件和 Media Optimizer 的 Files and Documents 功能插件均启用时,该插件会自动配置 files_upload_handler 和 documents_file_types 选项。这会在 Link 对话框中启用文件上传,而无需手动配置。但是,您可以如上例所示,通过显式设置 documents_file_types 选项来自定义支持的文件类型列表。

文档操作

以下是 Media Optimizer 的 Files and Documents 功能插件针对文档文件上传所提供的功能概述:

工具栏按钮图标描述

link

link.svg

打开“插入/编辑链接”对话框,用户可通过文件选择器上传文件或将文件拖放至此处进行上传。上传的文件将通过 Uploadcare 的基础设施进行处理,并自动在内容中建立链接。

Media Optimizer 的 Files and Documents 功能插件支持全面的文件类型列表:

  • 文档: PDF, Word (doc, docx), Excel (xls, xlsx), PowerPoint (ppt, pps, pptx), RTF, 纯文本 (txt)

  • iWork 文件: Keynote (key), Pages (pages), Numbers (numbers)

  • 音频文件: WAV (wav, wave), MP3 (mp3), OGG (ogg)

  • 归档文件: ZIP (zip), GZIP (gz, gzip), TAR (tar), TAR.GZ (tar.gz, tgz), 7Z (7z), RAR (rar)

当同时启用 Media Optimizer 的 Files and Documents 功能插件和 Link 插件时,Link 对话框将显示一个“Upload”(上传)选项卡以支持文件上传。用户可以通过拖放、选择文件或提供 URL 来上传文件。上传的文件将通过 Uploadcare 的基础设施进行处理,并自动在内容中建立链接。

选项

以下配置选项会影响 Files and Documents 功能的行为:

documents_file_types

此选项指定在使用 Media Optimizer 插件时,链接对话框中支持哪些文件类型(MIME 类型和扩展名)用于文件上传。当同时启用 Link 插件和 Media Optimizer 插件时,Media Optimizer 插件会自动配置此选项,以在链接对话框中启用文件上传。

该选项应为一个非空对象数组,其中每个对象包含:

  • mimeType - 表示 MIME 类型的字符串(例如:'application/pdf')

  • extensions - 表示文件扩展名的字符串数组(例如:['pdf'])

如果 documents_file_types 设置为空数组,或者不是符合配置架构的有效对象数组,Media Optimizer 插件将抛出错误:“Must be a non-empty array of objects matching the configuration schema.”(必须为符合配置架构的非空对象数组。)

当启用带有 link 插件的 Media Optimizer 插件时,它会自动设置默认的支持文件类型列表。默认列表包括:

  • 文档: PDF, Word (doc, docx), Excel (xls, xlsx), PowerPoint (ppt, pps, pptx), RTF, 纯文本 (txt)

  • iWork 文件: Keynote (key), Pages (pages), Numbers (numbers)

  • 音频文件: WAV (wav, wave), MP3 (mp3), OGG (ogg)

  • 归档文件: ZIP (zip), GZIP (gz, gzip), TAR (tar), TAR.GZ (tar.gz, tgz), 7Z (7z), RAR (rar)

可以通过在编辑器配置中手动设置 documents_file_types 来自定义此列表。

类型: Array

默认值: undefined。

当同时启用 link 插件和 Media Optimizer 插件时,Media Optimizer 插件会自动配置此选项。自动配置的列表包括文档、iWork 文件、音频文件和归档文件。

优先级行为

当设置了 documents_file_types 时,它将作为整个编辑器中支持文件类型的唯一事实来源。这意味着:

  • Link 插件使用此自定义列表,而不是其默认的支持文件类型

  • 当同时启用 link 插件和 Media Optimizer 插件时,Media Optimizer 插件也使用此列表来确定允许用于文件上传的 mimeType 值,因为它们通过此选项共享相同的支持文件类型列表。

    • 如果某种 MIME 类型在服务端被 Uploadcare 仪表盘阻止,那么无论是否设置了 documents_file_types,该 MIME 类型在客户端也会被阻止,从而导致出现诸如“File type not allowed”(不允许的文件类型)或“File type not supported”(不支持的文件类型)的错误消息。

如果未设置 documents_file_types:

  • Link 插件使用其默认的支持文件类型列表

  • Media Optimizer 插件使用其自身默认的支持文件类型列表(如上所列)

示例:在 Media Optimizer 中使用 documents_file_types

此示例展示了如何在使用带有 Link 插件的 Media Optimizer 插件时自定义文件类型:

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: 'link',
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

此选项属于 Link plugin,也可以独立配置。有关文件上传配置的更多信息,请参阅 Link plugin 文档中的 documents_file_types。

工具栏按钮

Media Optimizer 的文件和文档功能插件提供以下工具栏按钮:

标识符描述

link

打开插入/编辑链接对话框,以便用户通过文件选择器上传文件或拖放文件进行上传。上传的文件将通过 Uploadcare 的基础设施处理,并自动链接到内容中。

可以使用以下方式将这些工具栏按钮添加到编辑器中:

菜单项

Media Optimizer 的文件和文档功能插件提供以下菜单项:

标识符描述

link

打开插入/编辑链接对话框,以便用户通过文件选择器上传文件或拖放文件进行上传。上传的文件将通过 Uploadcare 的基础设施处理,并自动链接到内容中。

可以使用以下方式将这些菜单项添加到编辑器中: