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:

Package version	Angular version	Details
Actively supported versions
^9	16+	Migration to TypeScript 5. Declaration files are not backward compatible. Requires CKEditor 5 in version 43 or higher.
Past releases (no longer maintained)
^8	13+	Requires CKEditor 5 at least in version 42.
^7	13+	Changes in peer dependencies. (issue)
^6	13+	Requires CKEditor 5 at least in version 37.
^5	13+	Requires Angular at least in version 13+. Lower versions are no longer maintained.
^4	9.1+	Requires CKEditor 5 at least in version 34.
^3	9.1+	Requires Node.js at least in version 14.
^2	9.1+	Migration to TypeScript 4. Declaration files are not backward compatible.
^1	5.x - 8.x	Angular versions are 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

After cloning this repository, install necessary dependencies:

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

npm run start

To test it in production, use:

npm run start -- --configuration production

To run unit tests, use:

npm run test

To run e2e tests, run:

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

To run coverage tests, run:

npm run coverage

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: yarn 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.