Easy Image 集成

The Easy Image is an intuitive tool for uploading images. Unlike the CKBox feature, which is a full-fledged file manager, Easy Image concentrates on upload only.

这是一个高级功能，除了您的 CKEditor 5 商业许可证之外，您还需要为此功能购买许可证。联系我们以获取适合您需求的报价。

您也可以注册 CKEditor 高级功能 30 天免费试用来测试该功能。

# 演示

下面的演示使用经典编辑器类型。它被配置为使用 CKEditor 云服务提供的 Easy Image 服务。

CKEditor 5 提供多种方法将图像包含在您的富文本内容中。您可以选择最适合您需求的方法。使用经典界面或通过高级图像处理来提高您的工作效率。

直接将图像粘贴或拖放到编辑器中。您也可以使用工具栏中的插入图像按钮。

此演示演示了有限的功能集。访问功能丰富的编辑器示例以查看更多实际操作。

# 其他功能信息

Easy Image 是 CKEditor 云服务的一部分。它是一款 SaaS 产品，它

安全地上传图像，
负责调整大小和优化它们以及提供各种图像大小（响应式图像），
通过超快的 CDN 传递上传的图像。

所有这一切几乎不需要服务器设置。

# 配置

为了使在 CKEditor 5 中启用图像上传变得轻而易举，EasyImage 插件集成了 CKEditor 云服务提供的 Easy Image 服务。启用它很简单，效果立竿见影

按照 Easy Image - 快速入门指南设置帐户。
配置 CKEditor 5（参见 CloudServicesConfig）

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        cloudServices: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

就这样。此时，您的应用程序将自动启用图像上传功能。

如果您在设置 Easy Image 时遇到问题，请联系我们。

# 配置允许的文件类型

实际上应该在两个地方配置允许上传的文件类型

在客户端，在 CKEditor 5 中，通过 CKEditor 5 UI 和命令限制图像上传。
在服务器端，在 Easy Image 中，限制 Easy Image 中接受的文件格式。

# 客户端配置

使用 image.upload.types 配置选项定义允许上传到 CKEditor 5 的图像 MIME 类型。

默认情况下，用户可以上传jpeg、png、gif、bmp、webp 和 tiff 文件。这与 Easy Image 支持的文件格式相对应，但您可以修改列表以限制允许的图像类型数量。

# 服务器端配置

查看 Easy Image 支持的文件格式列表。目前无法限制或扩展此列表，因此任何限制都需要在客户端引入。

# 响应式图像

CKEditor 5 引入的另一个很棒的功能是能够在富文本编辑器内容中拥有响应式图像。只需上传一张图像，就会创建该图像的多个优化版本，每个版本都针对不同的显示尺寸。所有这一切对上传图像的最终用户来说都是透明的。

The visualization of the responsive images approach for CKEditor 5 WYSIWYG editor.

# 为什么使用响应式图像？

与“传统”图像传递相比，响应式图像具有两大优势

它们节省数据传输。有无数种设备和屏幕尺寸组合可用于在您的应用程序中显示图像（智能手机、平板电脑、笔记本电脑等）。您无需向它们全部提供相同的全尺寸图像。

使用 Easy Image 保证只提供与用户屏幕尺寸相对应的特定尺寸变体，最大程度地减少传输到客户端的数据量。对于大型图像，这可以节省高达 90% 的传输数据 - 亲眼看看！
它们加载速度更快。因为只传输与屏幕尺寸匹配的图像，所以在大多数情况下，它可以比“常规”全尺寸图像更快地加载和显示。加载速度越快，用户就能越快看到它，这极大地改善了您的应用程序的用户体验。您不再需要等待高分辨率照片在小型智能手机屏幕上加载很长时间。

# 标记中的响应式图像

Easy Image 服务提供的响应式图像对您的应用程序是透明的。上传后，图像在编辑器内容中显示为“常规”图像，但具有一些额外的属性，例如srcset。

srcset 属性指定专门针对各种屏幕尺寸的图像变体，供 Web 浏览器从中选择（360px、720px、1080px、1440px 等）。例如，用户上传的image.jpg 文件将具有以下标记

<figure class="image">
    <img
        src="https://cdn.cke-cs.com/images/image.jpg"
        srcset="https://cdn.cke-cs.com/images/image.jpg/w_360 360w,
            https://cdn.cke-cs.com/images/image.jpg/w_720 720w,
            https://cdn.cke-cs.com/images/image.jpg/w_1080 1080w,
            ...
            https://cdn.cke-cs.com/images/image.jpg/w_2880 2880w,
            https://cdn.cke-cs.com/images/image.jpg/w_3240 3240w,
            https://cdn.cke-cs.com/images/image.jpg/w_3543 3543w"
        sizes="100vw"
        width="...">
    <figcaption>...</figcaption>
</figure>

srcset 属性中图像尺寸的多样性允许 Web 浏览器为特定屏幕尺寸选择最佳尺寸。因此，它加载速度更快，传输的数据更少。查看详细的 Easy Image 服务文档，以了解有关响应式图像和服务提供的其他功能的更多信息。

# 安装

⚠️ 新的导入路径

从 42.0.0 版本开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是较旧版本的 CKEditor 5，请参考旧版设置中的包指南。

此包是我们开源聚合包的一部分。

npm install ckeditor5

然后将 EasyImage 添加到您的插件列表中，并配置此功能。例如

import { EasyImage, Image } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ EasyImage, Image, /* ... */ ],
        toolbar: [ 'uploadImage', /* ... */ ],

        // Configure the endpoint. See the "Configuration" section above.
        cloudServices: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

请注意，大多数集成还需要在编辑器中加载 Image 插件才能使此功能正常工作（或 ImageBlock 或 ImageInline 中的一个）。查看 CKEditor 5 中关于图像的全面指南，以了解更多信息。

# 接下来的步骤

查看全面的图像上传概述，以了解有关在 CKEditor 5 中上传图像的不同方法的更多信息。

查看图像功能指南，以详细了解如何在 CKEditor 5 中处理图像。

# 贡献

该功能的源代码可在 GitHub 上获得，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-easy-image.

我们每天都在努力使我们的文档保持完整。您是否发现过时信息？是否缺少某些内容？请通过我们的问题跟踪器报告。

随着 42.0.0 版本的发布，我们重写了大部分文档以反映新的导入路径和功能。我们感谢您的反馈，这将帮助我们确保其准确性和完整性。