# CKEditor 5 rich text editor component for Angular

[![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)

Official [CKEditor 5](https://ckeditor.com/ckeditor-5/) rich text editor component for Angular 21+.

## [Developer Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html) 📖

See the ["Rich text editor component for Angular"](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html) guide in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest) to learn more:

* [Quick start](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#quick-start)
* [Integration with `ngModel`](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#integration-with-ngmodel)
* [Supported `@Input` properties](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-input-properties)
* [Supported `@Output` properties](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-output-properties)
* [Styling](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#styling)
* [Localization](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#localization)

## Supported Angular versions

Because of the breaking changes in the Angular library output format, the `@ckeditor/ckeditor5-angular` package is released in the following versions to support various Angular ecosystems:

<table>
  <thead>
    <tr>
      <th>CKEditor&nbsp;5&nbsp; Angular component version</th>
      <th>Angular&nbsp;version</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">Actively supported versions</td>
    </tr>
    <tr>
      <td><code>^13</code></td>
      <td><code>21+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v49.0.0">49</a> or higher.</td>
    </tr>
    <tr>
      <td colspan="3">Past releases (no longer maintained)</td>
    </tr>
    <tr>
      <td><code>^12</code></td>
      <td><code>20+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v49.0.0">49</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^11</code></td>
      <td><code>19+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v47.0.0">47</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^10</code></td>
      <td><code>16+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v46.0.0">46</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^9</code></td>
      <td><code>16+</code></td>
      <td>Migration to TypeScript&nbsp;5. Declaration files are not backward compatible. Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v43.0.0">43</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^8</code></td>
      <td><code>13+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v42.0.0">42</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^7</code></td>
      <td><code>13+</code></td>
      <td>Changes in peer dependencies (<a href="https://github.com/ckeditor/ckeditor5-angular/issues/376">issue</a>). Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0">37</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^6</code></td>
      <td><code>13+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0">37</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^5</code></td>
      <td><code>13+</code></td>
      <td>Requires Angular in version 13+ or higher.</td>
    </tr>
    <tr>
      <td><code>^4</code></td>
      <td><code>9.1+</code></td>
      <td>Requires CKEditor&nbsp;5 in version <a href="https://github.com/ckeditor/ckeditor5/releases/tag/v34.0.0">34</a> or higher.</td>
    </tr>
    <tr>
      <td><code>^3</code></td>
      <td><code>9.1+</code></td>
      <td>Requires Node.js in version 14 or higher.</td>
    </tr>
    <tr>
      <td><code>^2</code></td>
      <td><code>9.1+</code></td>
      <td>Migration to TypeScript&nbsp;4. Declaration files are not backward compatible.</td>
    </tr>
    <tr>
      <td><code>^1</code></td>
      <td><code>5.x&nbsp;-&nbsp;8.x</code></td>
      <td>Angular versions no longer maintained.</td>
    </tr>
  </tbody>
</table>

Note that the `package.json` file used in the main repository isn't published on npm (the production one is present in [`src/ckeditor/package.json`](https://github.com/ckeditor/ckeditor5-angular/blob/master/src/ckeditor/package.json)).

## Contributing

> [!NOTE]
> This project requires **pnpm v12.8.2**. You can check your version with `pnpm --version` and update if needed with `npm install -g pnpm@12.8.2`.

After cloning this repository, install necessary dependencies:

```bash
pnpm install
```

### The structure of the repository

This repository contains the following code:

* `./src/ckeditor` contains the implementation of the `<ckeditor>` component,
* `./src/app` is a demo application using the component.

**Note:** The [npm package](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular) contains a [packaged component](#packaging-the-component) only.

### Testing the component (demo)

To open the demo application using the component, run:

```bash
pnpm run start
```

To test it in production, use:

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

To run the full automated test suite against the default installed editor version, use:

```bash
pnpm run test
```

The unit test suite runs in a real browser (Chrome) using Vitest browser mode. `pnpm run test` and `pnpm run coverage` run the library specs (`src/ckeditor/**`) twice: with zone.js, like the demo application (the `zone` project), and without it, like a default Angular 21+ application (the `zoneless` project).

To run only the integration subset used by the CI editor-version matrix, use:

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

After a regular `pnpm install`, this command uses the default `ckeditor5` and `ckeditor5-premium-features` versions from `package.json`.

To run unit tests in watch mode, use:

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

To run e2e tests, run:

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

Playwright starts the demo app with `pnpm run start` on its own, or reuses one that already runs on port 4200. The tests use the system Chrome, so no browser download is needed.

To reproduce the LTS integration matrix run locally, install the matching editor packages first and then run the integration checks:

```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
```

If you prefer, you can put `CKEDITOR_LICENSE_KEY` in `.env` or `.env.local` instead. The Vitest setup reads it through Vite, and `pnpm run start` forwards it to `ng serve` for local e2e runs.

To run coverage tests, run:

```bash
pnpm run coverage
```

The coverage report is generated in the `./coverage` directory.

Play with the application and make sure the component works properly.

## License

Licensed under a dual-license model, this software is available under:

* the [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html),
* or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).