# @ckbox/uploader 中文文档

规范地址：https://npmcn.com/package/%40ckbox/uploader/

版本：2\.14\.0
npm 元数据更新时间：2026-10-15T10:01:41.264Z
中文译文更新时间：2026-11-09T23:31:07.305Z
软件包许可：SEE LICENSE IN LICENSE\.md

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ckbox/uploader
原文对照：https://npmcn.com/package/%40ckbox/uploader/?lang=original
项目主页：https://ckeditor.com/ckbox

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.8 MB，49 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2025-08-28T08:17:17.814Z
- 最新版本发布：2026-10-15T10:01:40.941Z
- 近 30 天下载量：2690（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 18 个）

## 中文简介

CKBox 上传部件

## 安装

```sh
npm install @ckbox/uploader
```

也可以使用：`pnpm add @ckbox/uploader`、`yarn add @ckbox/uploader`、`bun add @ckbox/uploader`

## README

# CKBox 文件夹

[https://ckbox.io/ (英语)](https://ckbox.io/)

CKBox是一个文件管理平台,在提供杰出的用户体验的同时,可以更容易地与您的文件合作.

![](https://github-production-user-asset-6210df.s3.amazonaws.com/12546548/263761910-fd39039c-adad-4e54-a125-20578507c15f.png)

## 快开始

使用来自CDN的架构是将 CKBox 嵌入您的应用程序中最简单和最快的方式. 此外,CDN服务的所有脚本都加载得更快,因为它们被托管在全球多个服务器上,缩短了响应时间.

要开始在您的网站上使用 CKBox, 请嵌入以下 `script` 页面 HTML 代码中的元素 :

```html
<script src="https://cdn.ckbox.io/ckbox/2.14.0/ckbox.js"></script>
```

快速实施实例:

```html
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.14.0/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            // You must provide a valid token URL in order to use the application
            // After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
            // https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint
            CKBox.mount(document.getElementById("ckbox"), {
                tokenUrl: "https://your.token.url",
            });
        </script>
    </body>
</html>
```

### 与CKEditor 5的融合

下面的代码片段介绍了CKEditor 5与CKBox集成的最简单的情景. 欲了解更多关于融合的信息,请参见: [CKEditor 5 整合指南](https://ckeditor.com/docs/ckbox/latest/guides/configuration/ckeditor-integration.html)。 。 。 .

```html
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.14.0/ckbox.js"></script>
        <link
            rel="stylesheet"
            href="https://cdn.ckbox.io/ckbox/2.14.0/styles/themes/lark.css"
        />
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/48.4.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor"></div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/48.4.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/48.4.0/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                CloudServices,
                CKBox,
                CKBoxImageEdit,
                PictureEditing,
                Image,
                ImageUpload,
                ImageUploadEditing,
                ImageUploadProgress,
                LinkEditing,
                Heading,
                Font,
                Bold,
                Italic,
                BlockQuote,
                Paragraph,
                Indent,
                Link,
                List
            } from 'ckeditor5';

            ClassicEditor
                .create( {
                    attachTo: document.querySelector( '#editor' ),
                    plugins: [
                        CKBox, CloudServices, Essentials, Bold, Italic, Font, Paragraph, LinkEditing,
                        PictureEditing, Image, ImageUploadEditing, ImageUploadProgress, BlockQuote,
                        Indent, Heading, Link, List, CKBoxImageEdit, ImageUpload
                    ],
                    ckbox: {
                        tokenUrl: 'https://your.token.url',
                        theme: 'lark',
                    },
                    toolbar: [
                        'ckbox', 'imageUpload', '|', 'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|',
                        'blockQuote', 'indent', 'link', '|', 'bulletedList', 'numberedList'
                    ],
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>
```

关于更先进的一体化设想方案,请参考 [CKBox 文档](https://ckeditor.com/docs/ckbox/latest/guides/index.html)。 。 。 .

## 文档

[CKBox 文档](https://ckeditor.com/docs/ckbox/latest/guides/index.html) 包括以下方面的资料:

-   在您的应用程序中启用 CKBox .
-   将 CKBox 与 CKEditor 5.
-   配置并自定义 CKBox.

你会发现准备使用代码片段 和现场实例.

## 许可证

**CKBox 文件夹** (单位:千美元)[https://ckeditor.com/ckbox/ (中文(简体) )](https://ckeditor.com/ckbox/)(中文(简体) )

版权(c)2021-2026, [CK Source Holding sp.z.o.o. (英语).](https://cksource.com/) 版权所有. **CKBox 文件夹** 获得商业许可证并受版权法的保护。 有关现有许可方案的详细情况,请与我们联系 [销售量@cksource.com](mailto:sales@cksource.com)。 。 。 .

商标 **CKBox 文件夹** 是一个商标: [CK Source Holding sp.z.o.o. (英语).](https://cksource.com/) 其他品牌和产品名称均为商标,注册商标或各自持有人的服务标志.

## 常见问题

### @ckbox/uploader 是什么？

CKBox 上传部件

### 如何安装 @ckbox/uploader？

在项目目录运行 npm install @ckbox/uploader，或使用 pnpm add / yarn add / bun add。

### @ckbox/uploader 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ckbox/uploader 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @ckbox/uploader 可以商用吗？

@ckbox/uploader 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @ckbox/uploader 的下载量有多少？

根据 npm 官方下载统计，@ckbox/uploader 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,690 次，日均约 90 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ckbox/uploader 还在维护吗？

最新版本 2\.14\.0 发布于 2026/10/15（25 天前）；至今共发布 27 个版本，其中过去 12 个月发布了 18 个；首次发布于 2025/08/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

