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:

CKEditor 5  Angular component version	Angular version	Details
Actively supported versions
^11	19+	Requires CKEditor 5 in version 47 or higher.
Past releases (no longer maintained)
^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).

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.

Releasing package

CircleCI automates the release process and can release both channels: stable (X.Y.Z) and pre-releases (X.Y.Z-alpha.X, etc.).

Before you start, you need to prepare the changelog entries.

1. Make sure the #master branch is up-to-date: git fetch && git checkout master && git pull.
2. Prepare a release branch: git checkout -b release-[YYYYMMDD] where YYYYMMDD is the current day.
3. Generate the changelog entries: pnpm run release:prepare-changelog.
   • You can specify the release date by passing the --date option, e.g., --date=2025-06-11.
   • By passing the --dry-run option, you can check what the script will do without actually modifying the files.
   • Read all the entries, correct poor wording and other issues, wrap code names in backticks to format them, etc.
   • Add the missing the/a articles, () to method names, "it's" -> "its", etc.
   • A newly introduced feature should have just one changelog entry – something like "The initial implementation of the FOO feature." with a description of what it does.
4. Commit all changes and prepare a new pull request targeting the #master branch.
5. Ping the @ckeditor/ckeditor-5-platform team to review the pull request and trigger the release process.

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.