Official CKEditor 5 rich text editor component for Angular 21+.
See the "Rich text editor component for Angular" guide in the CKEditor 5 documentation to learn more:
- Quick start
- Integration with
ngModel - Supported
@Inputproperties - Supported
@Outputproperties - Styling
- Localization
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:
| CKEditor 5 Angular component version | Angular version | Details |
|---|---|---|
| Actively supported versions | ||
^13 |
21+ |
Requires CKEditor 5 in version 49 or higher. |
| Past releases (no longer maintained) | ||
^12 |
20+ |
Requires CKEditor 5 in version 49 or higher. |
^11 |
19+ |
Requires CKEditor 5 in version 47 or higher. |
^10 |
16+ |
Requires CKEditor 5 in version 46 or higher. |
^9 |
16+ |
Migration to TypeScript 5. Declaration files are not backward compatible. Requires CKEditor 5 in version 43 or higher. |
^8 |
13+ |
Requires CKEditor 5 in version 42 or higher. |
^7 |
13+ |
Changes in peer dependencies (issue). Requires CKEditor 5 in version 37 or higher. |
^6 |
13+ |
Requires CKEditor 5 in version 37 or higher. |
^5 |
13+ |
Requires Angular in version 13+ or higher. |
^4 |
9.1+ |
Requires CKEditor 5 in version 34 or higher. |
^3 |
9.1+ |
Requires Node.js in version 14 or higher. |
^2 |
9.1+ |
Migration to TypeScript 4. Declaration files are not backward compatible. |
^1 |
5.x - 8.x |
Angular versions no longer maintained. |
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).
Note
This project requires pnpm v12.8.2. You can check your version with pnpm --version and update if needed with npm install -g [email protected].
After cloning this repository, install necessary dependencies:
pnpm install
This repository contains the following code:
./src/ckeditorcontains the implementation of the<ckeditor>component,./src/appis a demo application using the component.
Note: The npm package contains a packaged component only.
To open the demo application using the component, run:
pnpm run start
To test it in production, use:
pnpm run start --configuration production
To run the full automated test suite against the default installed editor version, use:
pnpm run testThe 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 tests_integration CI job, use:
pnpm exec vitest run --project integrationAfter a regular pnpm install, this command uses the ckeditor5 and ckeditor5-premium-features versions locked in pnpm-lock.yaml, which may be older than the latest versions that the CI job installs.
To run unit tests in watch mode, use:
pnpm run test:dev
To run e2e tests, run:
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 tests_integration CI job locally, install the latest packages first:
pnpm add -Dw ckeditor5@latest ckeditor5-premium-features@latest
pnpm exec vitest run --project integration
pnpm run test:e2eThe tests use the GPL license key by default. To run them with a commercial license key, set CKEDITOR_LICENSE_KEY in the environment, or copy .env.example to .env (or .env.local) and fill it in there. 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:
pnpm run coverage
The coverage report is generated in the ./coverage directory.
Play with the application and make sure the component works properly.
Licensed under a dual-license model, this software is available under:
- the GNU General Public License Version 2 or later,
- or commercial license terms from CKSource Holding sp. z o.o.
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.