CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/功能

指南图片上传概述

将 图片 插入使用 CKEditor 5 创建的内容是一个非常常见的任务。在正确配置的富文本编辑器中，最终用户可以通过多种方式插入图片

  • 粘贴剪贴板中的图片。
  • 从文件系统拖放文件。
  • 通过文件系统对话框选择图片。
  • 从应用程序中的媒体管理工具选择图片。
  • 粘贴图片的 URL，可以粘贴到编辑器对话框或直接粘贴到内容中。

# 演示

此演示配置为使用 CKBox 进行图片上传和管理。使用图片上传按钮 图片 上传图片，或使用 CKBox 按钮 打开文件管理器 浏览并从文件管理器中选择现有图片。它还包含 AutoImage 插件，该插件允许您 直接粘贴图片 URL。

上传图片

要上传图片，请执行以下操作

  1. 使用文件插入工具栏按钮打开上传对话框。
  2. 选择图片并确认上传。

图片将出现在内容中。

从 CKBox 插入图片

要使用 CKBox 插入图片，请执行以下操作

  1. 使用文件管理器工具栏按钮打开 CKBox 对话框。
  2. 选择图片并点击选择按钮。

图片将出现在内容中。

注意：您可以一次选择多个文件。您也可以在 CKBox 内部使用其原生上传机制上传图片。

其他上传图片的方法

  1. 通过内置的拖放机制上传图片。只需点击您需要上传的文件，将其拖放到编辑器中的目标位置，然后将其放下。上传将自动完成！
  2. 粘贴图片的 URL 到内容中，它将自动显示。

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

# 工作原理

除了粘贴图片的 URL 外，上面提到的所有其他解决方案都需要将图片上传到服务器。然后服务器将负责提供 CKEditor 5 用于在文档中显示图片的图片 URL。使图片上传成为可能的软件称为上传适配器。它是一个回调，告诉 WYSIWYG 编辑器如何将文件发送到服务器。在您的项目中，您可以采用两种主要策略来使图片上传工作

  • 官方上传适配器 – CKEditor 团队开发和维护了几个提供上传适配器的功能。其中一些功能非常简单，仅支持上传，而另一些功能，如 CKBox 资产管理器，则允许您上传、浏览、管理和编辑图片。选择最适合您集成的功能，并让它在您的项目中处理图片上传。
  • 自定义上传适配器 – 您也可以使用 CKEditor 5 的开放式 API 架构从头开始创建自己的上传适配器。

如果您想深入了解图片上传过程的内部机制，并详细了解该过程，您可以查看 “自定义图片上传适配器”深入指南，该指南涵盖了此主题。

# 官方上传适配器

# CKBox

CKBox 是 CKEditor 5 中不仅用于图片上传，还用于文件管理的终极解决方案。

它是一款现代文件上传器，具有简洁的界面、对响应式图片的自动支持和一流的用户体验。它还提供编辑功能，如裁剪、旋转或翻转。

由于与 CKEditor 5 本地集成，CKBox 支持拖放文件上传以及从剪贴板、Microsoft Word 或 Google Docs 粘贴图片。

使用 CKBox，用户可以上传文件并将它们分类到不同的组中。他们还可以更改文件的显示方式，例如，通过设置图片缩略图的大小或决定在一页上显示多少个文件。文件可以上传、删除、重命名和标记。文件属性（如尺寸、上传日期或大小）也很容易访问，可以与常规搜索一起用于对文件视图进行排序。

了解如何在您的项目中使用 CKBox.

# CKFinder

CKFinder 特性提供了一个富文本编辑器与 CKFinder 之间的桥梁，CKFinder 是一个基于浏览器的文件上传器，具有服务器端连接器（PHP、Java 和 ASP.NET）。

您可以通过两种方式将 CKEditor 5 与 CKFinder 集成

  • 仅使用服务器端连接器 – 在这种情况下，拖放到编辑器中的图像将上传到您服务器上运行的 CKFinder 服务器端连接器。
  • 同时使用服务器端连接器和客户端文件管理器（推荐）– 拖放到编辑器中的图像将上传到服务器（与第一个选项相同）。通过访问文件管理器，您可以浏览以前上传的图像，对其进行组织或编辑。

了解如何在您的项目中将 CKEditor 5 与 CKFinder 集成.

# 简单适配器

通过 简单上传适配器，您可以使用 XMLHttpRequest API 将图像上传到您的服务器，并使用最小的编辑器配置。

了解如何在 CKEditor 5 中使用简单上传适配器.

# Base64 适配器

通过 Base64 上传特性，可以将插入编辑器的图像转换为 Base64 字符串，并存储在 编辑器输出 中。

请记住，虽然 Base64 上传是一种简单的解决方案，但它也是极其低效的。图像文件本身将作为数据保留在数据库中，从而产生更大的数据负载和更高的传输量。我们建议使用其他方法将图像上传到 CKEditor 5。

了解如何在 CKEditor 5 中使用 Base64 编码的图像.

# 实现您自己的上传适配器

CKEditor 5 提供了一个开放的 API，允许您开发自己的上传适配器。定制适配器将允许您完全控制上传过程，这包括将文件发送到服务器并将服务器的响应（例如，保存文件的 URL）传递回 WYSIWYG 编辑器。

了解如何为 CKEditor 5 开发自定义上传适配器.