CKEditor 5 rich text editor component for Angular

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

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 v10 or higher. You can check your version with pnpm --version and update if needed with npm install -g pnpm@latest.

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.

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:

# Prepare the server.
pnpm run start
# Then, start tests.
pnpm run test:e2e

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:ci

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.