Media Optimizer 插件为 TinyMCE 提供了全面的媒体管理功能，支持通过 Uploadcare 服务进行图像和视频的优化、上传和处理。

概述

Media Optimizer 插件扩展了 TinyMCE 的媒体处理功能，允许直接在编辑器中上传、处理和嵌入图像和视频。该插件还支持通过 Link 插件的对话框上传和链接文档文件（如 PDF、Word、Excel、PowerPoint 等）。该插件利用 Uploadcare 的基础设施，提供实时媒体处理、响应式传输和高级优化功能。

主要优势

  • 直接在编辑器中上传和优化图像和视频

  • 通过 Link 插件的对话框上传和链接文档文件（如 PDF、Word、Excel、PowerPoint 等）

  • 实时媒体优化和压缩

  • 响应式媒体传输，自动选择格式

  • 高级图像过滤和视频播放器自定义

  • 拖放式媒体上传，支持文件选择和 URL 输入

  • 无损转换和调整

  • 企业级云存储，全球 CDN 传输

  • 内置安全功能，包括恶意软件保护和内容检测

功能完整的交互式示例

HTML

<textarea id="uploadcare-full-feature">
  <h1>在马略卡岛发现您的梦想家园：天堂与投资的交汇点</h1>
  <p><span style="color: #4e5c73;">马略卡岛，地中海的明珠，不仅仅是一个美丽的度假胜地——它还是一项明智的投资。随着房产价值持续攀升，现在正是您拥有这片阳光普照的天堂的最佳时机。&nbsp;</span></p>
  <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 718;" src="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/100x/ 100w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/200x/ 200w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/300x/ 300w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/500x/ 500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/750x/ 750w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/ 2048w" alt="马略卡岛">
  <figcaption>Michael Heuser 来自 <a href="https://unsplash.com/@gum_meee">Unsplash</a></figcaption>
  </figure>
  <p>让我们向您展示为何马略卡岛应成为您的下一个家园——并向您介绍一栋即将属于您的精美别墅。</p>
  <blockquote><em>“马略卡岛房地产市场在过去五年中以年均8%的惊人速度增长，”</em> &mdash; Elena Alvarez，Mediterranean Realty Insights的市场分析师。</blockquote>
  <p>根据最新市场数据，马略卡岛的房产价值持续稳步增长，过去五年&nbsp;<a href="tiny.cloud">年均涨幅达8%</a>。这种持续增值，加上蓬勃发展的租赁市场，使其成为追求奢华生活和财务回报的投资者的理想目的地。&nbsp;</p>
  <h2>体验动态中的马略卡岛</h2>
  <p class="p1">在我们探索岛上最独特的房产之前，请花点时间感受马略卡岛本身的魅力。</p>
  <p class="p1">感受地中海阳光的温暖，聆听海浪轻柔的韵律，想象自己被永恒的美丽与宁静所环绕的生活。观看这段迷人的视频，让岛上的生活方式和魅力栩栩如生：</p>
  <uc-video uuid="be94d5d8-330e-4503-b886-ef096ee8751c" class="tox-uc-video" autoplay="false" controls="true" height="368" loop="false" muted="true" preload="metadata" width="653" posteroffset="0:10" showlogo="false"></uc-video>
  <h2 class="p1">探索我们的精选别墅：奢华的典范&nbsp;</h2>
  <p>这座精美别墅坐落于马略卡岛最尊贵的区域之一，提供令人叹为观止的景色和现代化的设计。每一个细节都经过精心雕琢，旨在为您提供极致的舒适与优雅。</p>
  <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
  <figcaption>由 <a href="https://www.freepik.com/">Freepik</a> 设计</figcaption>
  </figure>
  <ul>
    <li><strong>5间豪华卧室</strong>，均配有独立浴室</li>
    <li><strong>无边泳池</strong>，可饱览地中海全景</li>
    <li><strong>宽敞露台</strong>，适合户外用餐和娱乐</li>
    <li><strong>私人花园</strong>，绿树成荫</li>
    <li><strong>尖端的智能家居系统&nbsp;</strong><strong>&nbsp;</strong></li>
  </ul>
  <figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/
f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="漂亮的厨房室内设计">
  <figcaption>由 <a href="https://www.freepik.com/">Freepik</a> 设计</figcaption>
  </figure>
  <p>走进别墅，您会发现明亮、开放的居住空间与户外环境无缝融合，营造出一个既轻松又鼓舞人心的和谐居住环境。</p>
  <p>在马略卡岛拥有一栋别墅不仅仅是拥有一个家，更是享受奢华和冒险的生活。从探索迷人的村庄到在世界级餐厅用餐，再到在碧蓝的海域航行，每一天都是新的体验。</p>
  <h2>让梦想成真</h2>
  <p>不要错过拥有这片天堂的机会。<a href="tiny.cloud">立即联系我们</a> 预约私人参观这栋非凡的别墅，并探索岛上其他的独家房产。</p>
</textarea>

JS

tinymce.init({
  selector: "textarea#uploadcare-full-feature",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '<your-public-key>',
  uploadcare_filters: [
    { name: 'adaris', amount: -100 }, // Adaris 应用反色效果（amount -100），标签默认为“adaris”
    { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris 应用反色效果（amount -100），标签为“Vintage”
    { name: 'adaris', amount: 0, label: 'Base' }, // Adaris 应用中性效果（amount 0），标签为“Base”
    { name: 'adaris', amount: 50, label: 'Light' }, // Adaris 应用明亮效果（amount 50），标签为“Light”
    { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris 应用强烈效果（amount 200），标签为“Intense”
    { name: 'galen', amount: 80, label: 'Soft' }, // Galen 应用柔化效果（amount 80），标签为“Soft”
    { name: 'carris', amount: 120, label: 'Sharp' }, // Carris 应用高对比度（amount 120），标签为“Sharp”
    { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel 应用变暗效果（amount -50），标签为“Night”
    { name: 'none' }, // 不应用任何滤镜
  ],
  // 视频配置
  uploadcare_video_properties: {
    autoplay: false,
    controls: true,
    loop: false,
    muted: true,
    preload: 'metadata',
    posterOffset: "0:10",
    showLogo: false,
    fluid: true,
  },
  // 文件上传配置 - 在链接对话框中启用文件上传
  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' ] }
  ],
  a11y_advanced_options: true,
  toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare uploadcare-video | code preview",
  height: 700,	
  content_style: `
  body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.17em; }
  h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
  p { line-height: 1.6; margin: 0; } 
  p + p { margin-top: 1rem; }
  a { color: #2b70e3; }
  blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
  figcaption { font-size: 0.875em; }
  uc-video { display: block; margin: 1rem 0; width: 100%; }
  `
});

快速开始

要将 Media Optimizer 插件添加到编辑器中，请在编辑器配置的 plugins 选项中包含 uploadcare。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link', // 包含“link”插件以支持文件上传
  toolbar: 'uploadcare uploadcare-video link',
  uploadcare_public_key: '<your-public-key>', // Uploadcare 集成所需
  uploadcare_resources: 'uploadcare/uploadcare', // Media Optimizer 插件与 TinyMCE 一起打包时需要
  // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
  //   signature: 'sig',
  //   expire: 123
  // }), // 推荐用于安全上传的选项
});

有关如何使用模块打包器打包此插件的信息，请参阅 打包 TinyMCE - 概述。

功能

有关 Media Optimizer 插件提供功能的完整指南，请参阅以下页面：

图像

图像优化选项，包括图像过滤、调整大小和调节。

视频

视频优化选项，包括视频播放器自定义、调整大小和调节。

文件与文档

支持文档文件上传和链接，包括 PDF、Word、Excel、PowerPoint 等多种格式。

选项

以下配置选项会影响 Media Optimizer 插件的行为：

uploadcare_public_key

定义用于验证和与 Uploadcare API 进行交互所需的公共 API 密钥。此密钥标识您的账户，并确保上传和操作与您的项目关联。如果未设置此密钥，Uploadcare 集成将无法正常工作。

使用 Uploadcare 时，此选项为必填项。

类型： String

示例：设置 uploadcare_public_key

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
});

uploadcare_signed_upload_auth_provider

指定一个函数，用于为对 Uploadcare 的已验证请求生成安全签名。启用 Uploadcare 的签名上传功能时需要此函数，这可以确保只有授权用户才能使用您的 uploadcare_public_key 上传文件。该函数应返回一个 Promise，该 Promise 会解析为一个包含签名和过期时间戳的对象。

使用此选项可强制安全上传，防止未经授权的用户通过您的应用程序上传文件。

有关 Uploadcare 签名上传的更多信息，请参阅官方文档 Uploadcare Signed Uploads。

类型： Function

示例：设置 uploadcare_signed_upload_auth_provider

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_signed_upload_auth_provider: (publicKey) => Promise.resolve({
    signature: 'sig',
    expire: 123
  }),
});
入门项目

为了快速上手并了解 Uploadcare 签名上传如何与 TinyMCE Media Optimizer 集成，Tiny 建议尝试 GitHub 上的入门项目，以使用签名上传功能设置 Media Optimizer。克隆该仓库并按照步骤设置项目。该链接指向入门项目的 GitHub 页面，您可以在此查看源代码：TinyMCE Media Optimizer Signed Uploads Starter Project。

Tiny 建议配置 uploadcare_signed_upload_auth_provider 选项以确保上传安全，并防止滥用您的 Uploadcare uploadcare_public_key。对于需要以下功能的应用程序，此选项必不可少：

  • 防止通过您的 uploadcare_public_key 进行未经授权的文件上传。

  • 强制执行安全上传实践以维护应用程序的完整性。

此选项仅通过在上传过程中验证签名，确保未经授权的用户无法访问 uploadcare 存储以上传文件。

对于大多数集成，通过配置此选项启用签名上传可以确保仅发生授权上传，从而降低滥用风险并保持您的 uploadcare_public_key 的安全使用。

uploadcare_cdn_base_url

指定用于 Uploadcare 服务的域名。此域名决定了文件上传和访问的位置。默认情况下，插件使用 Uploadcare CDN ucarecdn.com 来托管和交付您的文件。如果您使用自定义域名，请更新此选项以匹配您的配置。

类型： String

默认值： https://ucarecdn.com/

示例：自定义 uploadcare_cdn_base_url

tinymce.init({
  selector: "textarea",
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_cdn_base_url: 'https://cdn.mydomain.com',
});

uploadcare_store_type

指定上传文件的存储类型。使用此选项可以控制文件是临时存储还是永久存储，或者让 Uploadcare 根据您的项目设置自动决定。

  • auto：将存储行为的选择推迟到 Uploadcare 仪表板中的自动存储设置。

  • temporary：文件将被临时存储，并在 24 小时后删除。

  • permanent：文件将永久存储在您的 Uploadcare 账户中。

根据您的应用程序需求选择合适的值，例如文件是否应长期持久化或仅在有限时间内可用。

类型： String

默认值： permanent

可能的值： auto, temporary, permanent

示例：使用 uploadcare_store_type

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_store_type: 'temporary',
});

uploadcare_resources

指定从何处加载 Uploadcare 插件资源的基础路径。如果 Uploadcare 资源的托管位置与 TinyMCE 主安装位置分开，您可以使用此选项指定不同的路径。

类型： String

默认值： '<plugin-path>'

示例：设置 uploadcare_resources
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_resources: 'path/to/uploadcare-resources/',
  license_key: '<your-license-key>'
});

资源结构

使用 uploadcare_resources 时，请确保目录结构遵循此模式，尤其是 js 和 css 子目录，且存在必要的资源文件：

目录结构示例：
project/
│  └── uploadcare/
│     ├── js/
│     │   └── ucvideo.min.js
│     ├── css/
│     │   └── uc-video.css
│     └── plugin.min.js
└── tinymce/
    └── tinymce.min.js
此选项不控制 Uploadcare 主插件脚本的加载，该脚本应根据情况包含在 plugins 或 external_plugins 配置选项中。

a11y_advanced_options

此选项影响以下功能：

  • 无障碍检查器插件（a11ychecker）。

  • 图像插件（image）。

  • 由 Uploadcare 提供的 Media Optimizer 插件（uploadcare）。

将 a11y_advanced_options 设置为 true：

  • 在“插入/编辑图像”对话框中添加“图像为装饰性”选项，允许用户指定图像为装饰性，无需为无障碍目的提供替代文本。

  • 在 Media Optimizer 的“替代文本”上下文工具栏中添加“装饰性图像”按钮，允许用户指定图像为装饰性，无需为无障碍目的提供替代文本。

  • 在需要标记为装饰性的图像的“无障碍检查器错误”对话框中添加“图像为装饰性”选项。

如果 a11ychecker_allow_decorative_images 未明确设置，将使用 a11y_advanced_options 中定义的值。

类型： Boolean

默认值： false

可能的值： true，false

示例：使用 a11y_advanced_options

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  a11y_advanced_options: true,
});

工具栏按钮

Media Optimizer 插件提供以下工具栏按钮：

标识符描述

uploadcare

插入图像占位元素。此占位元素支持通过拖放、文件选择或提供 URL 进行图像上传。

可以通过以下方式将这些工具栏按钮添加到编辑器：

菜单项

Media Optimizer 插件提供以下菜单项：

标识符描述

uploadcare

插入图像占位元素。此占位元素支持通过拖放、文件选择或提供 URL 进行图像上传。

可以通过以下方式将这些菜单项添加到编辑器：

Media Optimizer 插件会覆盖 Quickbar 的 quickimage 工具栏项。为了确保更好的用户体验并避免出现两个图像按钮，请配置 quickbars_insert_toolbar 以省略 quickimage 工具栏项。