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

概述

Media Optimizer插件的图像功能提供了一系列强大的功能，用于图像托管、服务和编辑。其中包括响应式图像交付、自动图像格式选择、自动压缩以及无损图像转换和调整，所有这些均由Uploadcare提供支持。

主要优势

  • 通过根据访问者的浏览器和设备以最佳尺寸、格式和压缩方式提供图像，提高页面加载速度并节省带宽。

  • 无需使用图像编辑器，直接在TinyMCE内部通过无损转换和调整来编辑图像。随时可以更改想法！

  • 通过安全上传、内置恶意软件保护和不安全内容检测，确保安全合规。

  • 由Uploadcare提供的企业级可扩展云存储，通过其闪电般的全球CDN交付，并符合SOC2和GDPR标准。

交互示例

HTML

<textarea id="uploadcare-image">
<h1>探索您在马略卡岛的梦想家园：天堂与投资的完美结合</h1>
<p><span style="color: #4e5c73;">马略卡岛，地中海的瑰宝，不仅是一个美丽的地方&mdash;&mdash;它更是明智的投资选择。随着房产价值的持续上升，现在是在这片阳光普照的天堂拥有属于您的一片天地的最佳时机。&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>让我们向您展示为什么马略卡岛应该是您的下一个家&mdash;&mdash;并为您介绍一栋即将属于您的精致别墅。</p>

<blockquote><em>"在过去五年中，马略卡岛的房地产市场每年以令人瞩目的 8% 增长，"</em> &mdash; Mediterranean Realty Insights 的市场分析师 Elena Alvarez 表示。</blockquote>
<p>根据最近的市场数据，马略卡岛的房产价值经历了稳步增长，<a href="tiny.cloud">过去五年平均每年增长 8%</a>。这种持续的升值，加上繁荣的租赁市场，使其成为寻求奢华与投资回报的投资者的理想目的地。&nbsp;</p>

<h2>探索我们的精选别墅：奢华的典范&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="豪华木质房屋内部">
<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/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>在马略卡岛拥有一栋别墅不仅仅是拥有一个家&mdash;&mdash;它意味着享过着奢侈和冒险的生活。从探索迷人的村庄到在世界级餐厅用餐，再到在碧绿的海水中航行，每一天都是新的体验。

让这个梦想成为现实
不要错过拥有这片天堂的机会。立即联系我们，安排这栋卓越别墅的私人参观，并探索岛上其他独家物业。

JS

tinymce.init({
  selector: "textarea#uploadcare-image",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '',
  uploadcare_filters: [
    { name: 'none' }, // 不应用滤镜
    { name: 'adaris', amount: -100 }, // Adaris 反转效果（amount -100），标签默认为 'adaris'
    { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris 反转效果（amount -100），标签显示 'Vintage Fade'
    { name: 'adaris', amount: 0, label: 'Base' }, // Adaris 中性效果（amount 0），标签显示 'Base'
    { name: 'adaris', amount: 50, label: 'Light' }, // Adaris 轻度效果（amount 50），标签显示 'Light'
    { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris 标准效果（amount 100），标签显示 'Standard'
    { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris 强烈效果（amount 200），标签显示 'Intense'
    { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen 强烈效果（amount 200），标签显示 'Glow Boost'
    { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen 柔化效果（amount 80），标签显示 'Soft Focus'
    { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris 高对比度效果（amount 120），标签显示 'Sharp Contrast'
    { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand 轻度增强效果（amount 60），标签显示 'Light Touch'
    { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel 暗化效果（amount -50），标签显示 'Night Mood'
  ],
  a11y_advanced_options: true,
  toolbar: "undo redo | uploadcare | styles | bold italic underline | forecolor | bullist numlist| link | 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;}
  `
  });

插件兼容性问题

由 Uploadcare 驱动的 Media Optimizer 高级插件不能与以下插件同时配置：

推荐解决方案：

对于图像：

  • 同时配置 Image 和 Edit Image 插件，或

  • 将 Media Optimizer: Image 插件配置为所有图像的唯一处理器。

如果启用了所有三个插件，编辑器将显示通知："由于存在不兼容的插件，无法初始化 uploadcare。详细信息请查看浏览器控制台。" 同时控制台会显示错误："由于存在不兼容的插件（image, editimage），无法初始化 uploadcare。"

基本设置

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

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '', // Uploadcare 集成所需
  // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
  //   signature: 'sig',
  //   expire: 123
  // }), // 安全上传的推荐选项
});

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

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

图像操作

以下是 Media Optimizer 的 Image 功能插件提供的图像优化功能概述：

功能图标描述

上传

upload-from-device.svg

通过拖放、文件选择或 URL 输入上传图像

从 URL 上传

upload-from-link.svg

从 URL 上传图像

以下是 Media Optimizer 的 Image 功能插件提供的图像编辑功能概述：

功能操作图标说明

对齐

左对齐.svg

提供图像或元素的对齐选项。

左对齐

左对齐.svg

将图像左对齐。

居中对齐

居中对齐.svg

将图像居中对齐。

右对齐

右对齐.svg

将图像右对齐。

变换

图像变换.svg

允许用户对图像应用变换：

向左旋转

向左旋转.svg

逆时针（向左）旋转图像。

向右旋转

向右旋转.svg

顺时针（向右）旋转图像。

垂直翻转

垂直翻转.svg

垂直翻转图像。

水平翻转

水平翻转.svg

水平翻转图像。

调整大小

调整大小.svg

更改图像的大小。

调整

调整.svg

提供调整图像属性的工具：

亮度

亮度.svg

调整图像的亮度。

对比度

对比度.svg

调整图像的对比度。

曝光

曝光.svg

调整图像的曝光。

Gamma

Gamma.svg

调整图像的 Gamma。

自然饱和度

自然饱和度.svg

调整图像的自然饱和度。

饱和度

饱和度.svg

调整图像的饱和度。

色温

色温.svg

调整图像的色温。

灰度

灰度.svg

将图像转换为灰度。

反转颜色

反转颜色.svg

反转图像的颜色。

锐化

锐化.svg

锐化图像。

模糊

模糊.svg

模糊图像。

滤镜

自动图像增强.svg

提供对图像应用滤镜的工具。

替代文本

替代文本.svg

添加替代文本，以用于无障碍访问目的描述图像。

装饰性图像

装饰性图像.svg

将图像标记为装饰性图像，表明该图像不需要用于无障碍访问的替代文本。

只有在启用 a11y_advanced_options 配置选项时，此图标才会出现。

说明文字

说明文字.svg

在图像下方添加说明文字以提供额外上下文。

还原

还原.svg

通过撤销所有编辑将图像恢复到原始状态。

选项

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

uploadcare_srcset_steps

指定一个数字值数组，表示用于为响应式图片生成 srcset 属性的宽度。这使浏览器能够根据设备的显示和网络条件选择最合适的分辨率。

自定义此数组，仅包含应用程序所需的宽度。减少分辨率数量可以提高处理速度，而添加特定尺寸可以满足独特的布局需求。

类型： Array

默认值： [100, 200, 300, 500, 750, 1000, 1250, 1500, 2000, 2500, 3000]

示例：使用自定义宽度生成 srcset 属性

上传图片时，会使用图片的原始宽度创建一个 srcset 属性，其中包含按定义宽度缩小后的图片。例如，如果图片宽度为780像素，且 uploadcare_srcset_steps 设置为 [100, 200, 300, 500, 750]，则生成的 srcset 如下所示：

示例：srcset 中具有自定义宽度的响应式780px图片
<img
  style="width: min(780px, 100%); aspect-ratio: 780 / 780;"
  src="https://ucarecdn.com/{image-uid}/-/preview/"
  sizes="(min-width: 780px) 780px, 100vw"
  srcset="
      https://ucarecdn.com/{image-uid}/-/resize/100x/ 100w,
      https://ucarecdn.com/{image-uid}/-/resize/200x/ 200w,
      https://ucarecdn.com/{image-uid}/-/resize/300x/ 300w,
      https://ucarecdn.com/{image-uid}/-/resize/500x/ 500w,
      https://ucarecdn.com/{image-uid}/-/resize/750x/ 750w,
      https://ucarecdn.com/{image-uid}/-/preview/ 780w
  ">

这确保浏览器根据视口和设备特性选择最佳图片尺寸，从而提升性能和用户体验。在视口较窄的设备上，会优先选择较小的图片（例如100w或200w），以减少带宽使用。

示例：自定义 uploadcare_srcset_steps

要自定义该数组，请按如下方式更新配置：

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_srcset_steps: [100, 200, 300, 500, 750],
});

uploadcare_filters

uploadcare_filters 选项定义了使用 Media Optimizer 的图片功能插件时可用的图片滤镜列表。每个滤镜应用一种与内容视觉设计一致的风格化图片效果，并且可以通过 amount 值配置以控制其强度。滤镜通过应用一致的样式来增强图片效果，提升整体质量，并提高用户参与度。

每个滤镜定义为一个包含以下属性的对象：

{
  name: 'filterName', // 必填：要应用的滤镜名称
  amount: number, // 可选：滤镜强度（默认值=100）
  label: 'string' // 可选：在UI中显示的自定义名称
}

  • name：预定义的滤镜标识符（例如 adaris、zevcen、galen）。

  • amount：滤镜效果的强度，范围为-100到200：

    • 0：无效果（图片保持原样）。

    • 0 到 100：逐渐增加滤镜强度。

    • 100：默认强度（滤镜设计的效果）。

    • >100：夸大效果。

    • <0：反转滤镜效果（生成“负片”版本）。

  • label：滤镜在UI中的可选显示名称。如果省略，则默认使用 name。

示例：设置 uploadcare_filters

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

  // 定义可用的Uploadcare图片滤镜及其强度级别
  uploadcare_filters: [
    { name: 'none' }, // 不应用滤镜
    { name: 'adaris', amount: -100 }, // Adaris 反转效果（amount -100），label 默认为 'adaris'
    { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris 反转效果（amount -100），label 显示为 'Vintage Fade'
    { name: 'adaris', amount: 0, label: 'Base' }, // Adaris 中性效果（amount 0），label 显示为 'Base'
    { name: 'adaris', amount: 50, label: 'Light' }, // Adaris 轻度效果（amount 50），label 显示为 'Light'
    { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris 标准效果（amount 100），label 显示为 'Standard'
    { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris 强烈效果（amount 200），label 显示为 'Intense'
    { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen 强烈效果（amount 200），label 显示为 'Glow Boost'
    { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen 柔化效果（amount 80），label 显示为 'Soft Focus'
    { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris 高对比度（amount 120），label 显示为 'Sharp Contrast'
    { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand 轻度增强（amount 60），label 显示为 'Light Touch'
    { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel 暗化效果（amount -50），label 显示为 'Night Mood'
  ]
});

{ name: 'none' } 选项会在可用滤镜列表中添加一个“无滤镜”或“移除滤镜”选项。这允许最终用户移除已应用的任何滤镜。如果不包含此选项，用户将无法在应用滤镜后移除它。

  • 滤镜名称必须从支持的集合中选择：

    • adaris、briaril、calarel、carris、cynarel、cyren、elmet、elonni、enzana、erydark、fenralan、ferand、galen、gavin、gethriel、iorill、iothari、iselva、jadis、lavra、misiara、namala、nerion、nethari、pamaya、sarnar、sedis、sewen、sorahel、sorlen、tarian、thellassan、varriel、varven、vevera、virkas、yedis、yllara、zatvel、zevcen。

  • 如果未设置数值，默认值为100。

  • 某些滤镜在0-100范围之外可能会表现异常。

  • 应用负数值会使滤镜效果反转，可用于创意效果。

Uploadcare 滤镜预览

以下每张图片代表同一原始图片应用不同滤镜的效果。

adarisbriarilcalarelcarris

adaris

briaril

calarel

carris

cynarel

cyren

elmet

elonni

cynarel

cyren

elmet

elonni

enzana

erydark

fenralan

ferand

enzana

erydark

fenralan

ferand

galen

gavin

gethriel

iorill

galen

gavin

gethriel

iorill

iothari

iselva

jadis

lavra

iothari

iselva

jadis

lavra

misiara

namala

nerion

nethari

misiara

namala

nerion

nethari

pamaya

sarnar

sedis

sewen

pamaya

sarnar

sedis

sewen

sorahel

sorlen

tarian

thellassan

sorahel

sorlen

tarian

thellassan

varriel

varven

vevera

virkas

varriel

varven

vevera

virkas

yedis

yllara

zatvel

zevcen

yedis

yllara

zatvel

zevcen

a11y_advanced_options

此选项影响以下组件的功能：

将 a11y_advanced_options 设置为 true：

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

  • 在媒体优化器的 替代文本 上下文工具栏中添加 装饰性图像 按钮，允许用户指定图像为装饰性图像，无需为了无障碍访问提供替代文本。

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

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

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 a11y_advanced_options

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  a11y_advanced_options: true,
});

工具栏按钮

媒体优化器的图像功能插件提供以下工具栏按钮：

标识符描述

uploadcare

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

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

菜单项

媒体优化器的图像功能插件提供以下菜单项：

标识符描述

uploadcare

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

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