# @ckeditor/ckeditor5-angular 中文文档

规范地址：https://npmcn.com/package/%40ckeditor/ckeditor5-angular/

版本：13\.0\.0
npm 元数据更新时间：2026-10-26T08:56:22.079Z
中文译文更新时间：2026-11-09T23:17:22.024Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

原始 npm 页面：https://www.npmjs.com/package/%40ckeditor/ckeditor5-angular
原文对照：https://npmcn.com/package/%40ckeditor/ckeditor5-angular/?lang=original
项目主页：https://ckeditor.com/
源码仓库：https://github.com/ckeditor/ckeditor5-angular

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

- 包体积（解压后）：97.3 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：rxjs \>=6\.0\.0，ckeditor5 \>=49\.0\.0 \|\| ^0\.0\.0-nightly \|\| ^0\.0\.0-internal，@angular/core \>=21\.2\.25，@angular/forms \>=21\.2\.25，@angular/common \>=21\.2\.25
- 首次发布：2018-07-26T13:11:43.790Z
- 最新版本发布：2026-10-26T08:56:21.753Z
- 近 30 天下载量：397440（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 11 个）

## 中文简介

CKEditor 5的官方Angular组件 – 基于浏览器的最佳丰富文本编辑器.

## 安装

```sh
npm install @ckeditor/ckeditor5-angular
```

也可以使用：`pnpm add @ckeditor/ckeditor5-angular`、`yarn add @ckeditor/ckeditor5-angular`、`bun add @ckeditor/ckeditor5-angular`

## README

# 用于 Angular 的 CKEditor 5 丰富的文本编辑器组件

[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-angular.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular) [![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5-angular.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-angular?branch=master) [![Coverage Status](https://codecov.io/github/ckeditor/ckeditor5-angular/graph/badge.svg)](https://codecov.io/github/ckeditor/ckeditor5-angular) ![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-angular)

公务 [电脑编辑 5](https://ckeditor.com/ckeditor-5/) angular 21+ 的丰富文本编辑器组件.

## [开发者文档](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html) 📖

见 [“Angular的 Rich 文本编辑器组件”](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html) 指南中 [CKEditor 5 文档](https://ckeditor.com/docs/ckeditor5/latest) 学习更多:

-   [快开始](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#quick-start)
-   [与 `ngModel`](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#integration-with-ngmodel)
-   [支助 `@Input` 属性](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-input-properties)
-   [支助 `@Output` 属性](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-output-properties)
-   [样式](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#styling)
-   [本地化](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#localization)

## 支持的角版本

由于Angular 库输出格式的中断变化 `@ckeditor/ckeditor5-angular` 软件包按以下版本发布,以支持各种角生态系统:

| CKEditor 5 角组件版本 | 角质版本 | 细节 |
| --- | --- | --- |
| 积极支持的版本 |
| `^13` | `21+` | 在版本中需要 CKEditor 5 [第49条](https://github.com/ckeditor/ckeditor5/releases/tag/v49.0.0) 或更高级. |
| 过去发布的(不再保留) |
| `^12` | `20+` | 在版本中需要 CKEditor 5 [第49条](https://github.com/ckeditor/ckeditor5/releases/tag/v49.0.0) 或更高级. |
| `^11` | `19+` | 在版本中需要 CKEditor 5 [第47条](https://github.com/ckeditor/ckeditor5/releases/tag/v47.0.0) 或更高级. |
| `^10` | `16+` | 在版本中需要 CKEditor 5 [第46条](https://github.com/ckeditor/ckeditor5/releases/tag/v46.0.0) 或更高级. |
| `^9` | `16+` | 迁移到 TypeScript 5. 声明文件不向后兼容 。 在版本中需要 CKEditor 5 [第43条](https://github.com/ckeditor/ckeditor5/releases/tag/v43.0.0) 或更高级. |
| `^8` | `13+` | 在版本中需要 CKEditor 5 [第42条](https://github.com/ckeditor/ckeditor5/releases/tag/v42.0.0) 或更高级. |
| `^7` | `13+` | 同行依赖关系的变化([问题](https://github.com/ckeditor/ckeditor5-angular/issues/376)) (中文(简体) ). 在版本中需要 CKEditor 5 [页:1](https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0) 或更高级. |
| `^6` | `13+` | 在版本中需要 CKEditor 5 [页:1](https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0) 或更高级. |
| `^5` | `13+` | 在13+版本或更高版本中需要角. |
| `^4` | `9.1+` | 在版本中需要 CKEditor 5 [页:1](https://github.com/ckeditor/ckeditor5/releases/tag/v34.0.0) 或更高级. |
| `^3` | `9.1+` | 在14版或更高版本中需要节点.js. |
| `^2` | `9.1+` | 向 TypeScript 4. 声明文件不向后兼容. |
| `^1` | `5.x - 8.x` | 角版不再维持. |

注意 `package.json` 主寄存器中使用的文件不在 npm 上发布(生产文件在 [`src/ckeditor/package.json`](https://github.com/ckeditor/ckeditor5-angular/blob/master/src/ckeditor/package.json)) (中文(简体) ).

## 捐款

> \[注\] 这个项目需要 **pnpm v12.8.2 (英语)**。您可以用 `pnpm --version` 并在需要时更新 `npm install -g pnpm@12.8.2`。 。 。 .

复制此寄存器后, 请安装必要的依赖 :

```bash
pnpm install
```

### 储存库的结构

此寄存器包含以下代码:

-   `./src/ckeditor` 执行《公约》的情况 `<ckeditor>` 构成部分,
-   `./src/app` 是使用组件的演示应用程序.

**说明:** 这个 [npm 软件包](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular) 包含一个 [包装组件](https://npmcn.com/package/%40ckeditor/ckeditor5-angular/#readme-packaging-the-component) 只有这个.

### 测试组件( 演示)

要使用组件打开演示应用程序, 请运行 :

```bash
pnpm run start
```

为了在生产中测试,使用:

```bash
pnpm run start --configuration production
```

要对照默认安装的编辑器版本运行全自动测试套件,请使用:

```bash
pnpm run test
```

单元测试套件在使用Vitest浏览器模式的正版浏览器(Chrome)中运行. `pnpm run test` 财务报告和审定财务报表 `pnpm run coverage` 运行库规格( r)`src/ckeditor/**`两次:带zone.js,如演示应用程序(即: `zone` 如默认的 Angular 21+ 应用程序( `zoneless` (项目).

要运行 CI 编辑器版本矩阵所使用的集成子集, 请使用 :

```bash
pnpm exec vitest run --project integration
```

经常的 `pnpm install`,此命令使用默认值 `ckeditor5` 财务报告和审定财务报表 `ckeditor5-premium-features` 版本来自 `package.json`。 。 。 .

要在监视模式下运行单位测试, 请使用 :

```bash
pnpm run test:dev
```

要进行e2e测试,请运行:

```bash
pnpm run test:e2e
```

Playwright 启动演示应用程序 `pnpm run start` 或重新使用已经在4200号端口运行的端口。 测试使用系统Chrome,所以不需要浏览器下载.

要复制 LTS 集成矩阵在本地运行,首先安装匹配的编辑器包,然后运行集成检查:

```bash
export CKEDITOR_LICENSE_KEY=<your-key>
pnpm add -Dw ckeditor5@lts-v47 ckeditor5-premium-features@lts-v47
pnpm exec vitest run --project integration
pnpm run test:e2e
```

如果你喜欢,你可以放 `CKEDITOR_LICENSE_KEY` 内 `.env` 或者说 `.env.local` 换句话说 Vitest的设定通过Vite读取 `pnpm run start` 转发给 `ng serve` 用于本地e2e运行.

运行覆盖测试,运行:

```bash
pnpm run coverage
```

覆盖报告载于 `./coverage` 目录.

玩弄应用程序,并确保组件正常工作.

## 许可证

该软件以双许可证模式获得许可,可在以下方式提供:

-   页:1 [GNU 通用公共许可证版本 2 或稍后版本](http://www.gnu.org/licenses/gpl.html), (中文(简体) ),
-   或商业许可证条款,来自CKSource Holding sp.z.o.

更多信息见: [https://ckeditor.com/legal/ckeditor-licensing-options 互联网档案馆的存檔,存档日期2013-12-22](https://ckeditor.com/legal/ckeditor-licensing-options)。 。 。 .

## 常见问题

### @ckeditor/ckeditor5-angular 是什么？

CKEditor 5的官方Angular组件 – 基于浏览器的最佳丰富文本编辑器\.

### 如何安装 @ckeditor/ckeditor5-angular？

在项目目录运行 npm install @ckeditor/ckeditor5-angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（\>=6\.0\.0）、ckeditor5（\>=49\.0\.0 \|\| ^0\.0\.0-nightly \|\| ^0\.0\.0-internal）、@angular/core（\>=21\.2\.25）、@angular/forms（\>=21\.2\.25）、@angular/common（\>=21\.2\.25）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ckeditor/ckeditor5-angular 支持 TypeScript 吗？

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

### @ckeditor/ckeditor5-angular 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ckeditor/ckeditor5-angular 可以商用吗？

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

### @ckeditor/ckeditor5-angular 的下载量有多少？

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

### @ckeditor/ckeditor5-angular 还在维护吗？

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