CKEditor 5 rich text editor component for Angular

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 @Input properties
• Supported @Output properties
• 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:

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).

After cloning this repository, install necessary dependencies:

pnpm install

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 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 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 tests_integration CI job, use:

pnpm exec vitest run --project integration

After 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:e2e

The 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.