CKEditor 5 rich text editor component for Angular

Official CKEditor 5 rich text editor component for Angular 21+.

Developer Documentation 📖

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

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:

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

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 [email protected].

After cloning this repository, install necessary dependencies:

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 contains a packaged component only.

Testing the component (demo)

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 CI editor-version matrix, use:

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:

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 LTS integration matrix run locally, install the matching editor packages first and then run the integration checks:

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:

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,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.