Base64 图像上传适配器

Base64 图像上传适配器将插入的图像转换为 Base64 编码字符串，在编辑器输出中。图像与其他内容一起存储在数据库中，无需任何服务器端处理。

请记住，虽然 Base64 上传是一个简单的解决方案，但它也非常低效。图像文件作为数据保存在数据库中，会产生更大的数据负载和更高的传输量。Base64 图像永远不会被浏览器缓存，因此加载和保存此类数据将始终比较慢。

这对某些功能来说可能很麻烦：因此修订历史记录可能需要更长时间来加载修订。对于评论也是如此。当您的文档导出为 PDF 或导出为 Word 时，包含 Base64 图像的内容也可能超过允许的文件大小。

因此，使用 Base64 功能是比其他一些可用功能效率低的选择。查看全面的图像上传概述指南，了解将图像上传到 CKEditor 5 的其他方法。

# 演示

使用下面的编辑器查看适配器的实际效果。打开网页浏览器控制台，然后单击编辑器下方的按钮，查看编辑器输出数据中的 Base64 编码图像。

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

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

此演示展示的功能有限。请访问功能丰富的编辑器示例，查看更多实际效果。

# 安装

⚠️ 新的导入路径

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

在安装编辑器后，将该功能添加到您的插件列表和工具栏配置中

import { ClassicEditor, Base64UploadAdapter } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Base64UploadAdapter, /* ... */ ],
        toolbar: [ /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

一旦在插件列表中启用，Base64 图像上传适配器就可以开箱即用，无需任何额外配置。

# 配置

# 配置允许的文件类型

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

在客户端，在 CKEditor 5 中，通过 CKEditor 5 UI 和命令限制图像上传。
在服务器端，在您的服务器配置中。

# 客户端配置

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

默认情况下，用户可以上传 jpeg、png、gif、bmp、webp 和 tiff 文件。您可以自定义此行为以接受例如 SVG 文件（在这种情况下使用 svg+xml 类型）。

# 服务器端配置

您需要在服务器上实现任何过滤机制来限制允许上传的图像类型。

# 下一步

查看全面的图像上传概述，了解在 CKEditor 5 中上传图像的不同方法。

查看图像功能指南，详细了解在 CKEditor 5 WYSIWYG 编辑器中处理图像的方法。

# 贡献

该功能的源代码在 GitHub 上提供，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-upload。

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

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