CKFinder 文件管理器

CKFinder 功能使您能够将图像和文件链接插入内容。CKFinder 是一个功能强大的文件管理器，具有各种图像编辑和图像上传选项。

这是一个高级功能，您需要在 CKEditor 5 商业许可证之外获得许可证才能使用它。联系我们获取适合您需求的报价。

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

# 演示

# 仅图像上传

此演示展示了文件管理器的服务器连接器仅处理图像上传的集成。

将图像直接粘贴到编辑器中。它将使用服务器端连接器自动上传。
使用工具栏中的插入图像按钮插入图像。

CKEditor 5 提供多种方式将图像包含在您的富文本内容中。您可以选择最适合您需求的方式。

要上传图像，您可以将它粘贴或拖放到编辑器中。

或者，使用工具栏按钮从您的磁盘插入选定的图像。

# 完全集成

此演示展示了与 CKFinder 文件上传器的完全集成。

将图像直接粘贴到编辑器中。它将使用服务器端连接器自动上传。
使用工具栏中的插入图像或文件按钮打开 CKFinder 文件管理器。然后插入图像或指向任何其他文件的链接。

CKEditor 5 提供多种方式将图像包含在您的富文本内容中。您可以选择最适合您需求的方式。

要上传图像，您可以将它粘贴或拖放到编辑器中。

或者，使用工具栏按钮打开 CKFinder 文件管理器。使用文件管理器的界面插入图像或指向文件的链接。借助 CKFinder，您还可以编辑图像、将它们整理到文件夹中或从服务器中删除它们。

这些演示仅展示了一部分功能。访问功能丰富的编辑器示例以查看更多实际操作。

# 其他功能信息

CKFinder 集成功能是 CKEditor 5 所见即所得编辑器与 CKFinder 文件管理器和上传器之间的桥梁。CKFinder 是一款商业应用程序，专为与 CKEditor 的兼容性而设计。它提供 PHP、ASP.NET 和 Java 的 3.x 版本以及 ASP 和 ColdFusion 的 2.x 版本。

您可以在富文本编辑器中以两种不同的方式使用此功能。

仅作为服务器端连接器 (演示)。在这种情况下，拖放到编辑器中的图像将上传到您服务器上运行的 CKFinder 服务器端连接器。
作为服务器和客户端文件管理器集成 (演示)。直接拖放到编辑器中的图像将上传到服务器（与第一个选项相同）。

还有更多酷炫的功能，例如
- 使用完整用户界面上传。
- 一次上传多个文件。
- 浏览之前上传的图像。
- 编辑图像（裁剪、调整大小等）。
- 整理或删除图像。
查看 CKFinder 文件管理器网站详细了解您可以在项目中使用的功能。

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, CKFinder, CKFinderUploadAdapter } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, CKFinderUploadAdapter, /* ... */ ],
        toolbar: [ 'ckfinder', 'uploadImage', /* ... */ ], // Depending on your preference.
        ckfinder: {
            // Feature configuration.
            // ...
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置

可以使用 config.ckfinder 对象配置该功能。

# 配置仅图像上传

借助 CKFinder 上传适配器，此功能可以将图像自动上传到服务器（例如，当用户将图像拖放到内容中时）。它只需要正确的 config.ckfinder.uploadUrl 路径。

假设您安装了 CKFinder PHP 服务器端连接器（并且它位于 https://example.com/ckfinder/ 下），请使用以下快速上传命令 URL 来启用图像上传

import { ClassicEditor, CKFinder, CKFinderUploadAdapter } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, CKFinderUploadAdapter, /* ... */ ],

        // Enable the insert image button in the toolbar.
        toolbar: [ 'uploadImage', /* ... */ ],

        ckfinder: {
            // Upload the images to the server using the CKFinder QuickUpload command.
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
            }
        } )
    .then( /* ... */ )
    .catch( /* ... */ );

查看仅图像上传演示。

# 配置完整集成

要在您的应用程序中同时使用图像上传功能和文件管理器用户界面，您必须首先加载 CKFinder JavaScript 库。然后在您的富文本编辑器实例中启用 CKFinder 集成。

加载 CKFinder 库最简单的方法是首先包含加载ckfinder.js文件的<script>标签

<script src="https://example.com/ckfinder/ckfinder.js"></script>

然后

确保已启用用于 CKEditor 5 的 CKFinder 插件。请参阅安装部分。
要启用在将图像粘贴或拖放到编辑器内容时自动上传到服务器的功能，请设置正确的 config.ckfinder.uploadUrl 路径。
要显示打开 CKFinder 文件管理器 UI 的工具栏按钮，以便用户可以选择服务器上的文件，请确保您的 config.toolbar 中存在'ckfinder'。
此外，您可以使用 config.ckfinder.options 来定义 CKFinder 的选项。例如
- 您可以定义 options.resourceType 以告知 CKFinder 当用户单击按钮时可以浏览指定资源类型。
- 您可以定义 options.language 来设置 CKFinder 的 UI 语言。默认情况下，它将设置为编辑器的 UI 语言。

import { ClassicEditor, CKFinder, CKFinderUploadAdapter } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, CKFinderUploadAdapter, /* ... */ ],

        // Enable the CKFinder button in the toolbar.
        toolbar: [ 'ckfinder', /* ... */ ]

        ckfinder: {
            // Upload the images to the server using the CKFinder QuickUpload command.
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',

            // Define the CKFinder configuration (if necessary).
            options: {
                resourceType: 'Images'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

查看完整集成的演示。

# 配置打开程序

您可以使用 config.ckfinder.openerMethod 选项更改 CKFinder 的打开方式。

默认情况下，文件管理器以模态方式打开。要以新的弹出窗口打开它，请将配置值设置为popup

import { ClassicEditor, CKFinder, CKFinderUploadAdapter } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, CKFinderUploadAdapter, /* ... */ ],
        toolbar: [ 'ckfinder', /* ... */ ]
        ckfinder: {
            // Open the file manager in the pop-up window.
            openerMethod: 'popup'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置允许的文件类型

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

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

# 客户端配置

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

默认情况下，用户可以上传jpeg、png、gif、bmp、webp和tiff文件，但您可以自定义此行为以接受例如 SVG 文件。

# 服务器端配置

使用allowedExtensions配置选项来定义允许使用 CKFinder 上传到特定资源类型的文件扩展名。有关更多信息，请参阅相关的服务器端连接器文档。

# 通用 API

CKFinder 插件注册

'ckfinder' UI 按钮组件。
由 CKFinderCommand 实现的'ckfinder' 命令。

您可以通过执行以下代码来打开 CKFinder
```
editor.execute( 'ckfinder' );
```

此外，在“仅图像上传”集成中，您可以使用 ImageUpload 插件注册的以下按钮和命令

'uploadImage' UI 按钮组件。
由 UploadImageCommand 实现的'uploadImage' 命令。

我们建议使用官方的 CKEditor 5 检查器进行开发和调试。它将为您提供有关编辑器状态的大量有用信息，例如内部数据结构、选择、命令等等。

# 下一步

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

查看图像功能指南，以了解有关在 CKEditor 5 中处理图像的更多信息。

# 贡献

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

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

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