Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@ckeditor/ckeditor5-angular

ckeditor315.6kGPL-2.0-or-later9.1.0TypeScript support: included

Official Angular component for CKEditor 5 – the best browser-based rich text editor.

wysiwyg, rich text, editor, html, contentEditable, editing, angular, angular2, angular 5, ng, component, ckeditor, ckeditor5, ckeditor 5

readme

CKEditor 5 rich text editor component for Angular

npm version CircleCI Coverage Status Dependency Status

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:

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 changelog --branch release-[YYYYMMDD] [--from [GIT_TAG]].

    • By default, the changelog generator uses the latest published tag as a starting point for collecting commits to process.

      The --from modifier option allows overriding the default behavior. It is required when preparing the changelog entries for the next stable release while the previous one was marked as a prerelease, e.g., @alpha.

      Example: Let's assume that the v40.5.0-alpha.0 tag is our latest and that we want to release it on a stable channel. The --from modifier should be equal to --from v40.4.0.

    • This task checks what changed in each package and bumps the version accordingly. It won't create a new changelog entry if nothing changes at all. If changes were irrelevant (e.g., only dependencies), it would make an "internal changes" entry.
    • Scan the logs printed by the tool to search for errors (incorrect changelog entries). Incorrect entries (e.g., ones without the type) should be addressed. You may need to create entries for them manually. This is done directly in CHANGELOG.md (in the root directory). Make sure to verify the proposed version after you modify the changelog.
  4. Commit all changes and prepare a new pull request targeting the #master branch.
  5. Ping the @ckeditor/ckeditor-5-devops team to review the pull request and trigger the release process.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.

changelog

Changelog

9.1.0 (2024-11-25)

Features

  • Align integration to work with the future self-service plan. Read more in the CKEditor 5 repository. (commit)
  • Print editor errors in console if there is no (error) observer. (commit)

9.1.0-alpha.0 (2024-11-13)

Features

  • Align integration to work with the future self-service plan. Read more in the CKEditor 5 repository. (commit)
  • Print editor errors in console if there is no (error) observer. (commit)

9.0.0 (2024-09-19)

BREAKING CHANGES

  • Changed minimum supported version of Angular to the oldest supported LTS: >=16.x.
  • Switched compiler from TypeScript 4.x to 5.x to ensure compatibility with the newest CKEditor 5 packages.

Features

  • Experimental: Add cloud CDN support. (commit)

9.0.0-alpha.0 (2024-09-06)

BREAKING CHANGES

  • Changed minimum supported version of Angular to the oldest supported LTS: >=16.x.
  • Switched compiler from TypeScript 4.x to 5.x to ensure compatibility with the newest CKEditor 5 packages.

Features

  • Add cloud CDN support. (commit)

Other changes

  • Updated yarn.lock to fix dependabot alert. (commit)

8.0.0 (2024-06-26)

We are excited to announce the next major version of the Angular integration.

This release is intended to allow the integration to work with the latest version of new installation methods.

8.0.0-alpha.0 (2024-06-05)

We are happy to announce the alpha release of the next major version of the React integration.

This release is intended to allow the integration to work with existing and new installation methods announced in this post.

Please refer to our nightly documentation build for the installation instructions.

Features

  • Change the implementation to only depend on types from the ckeditor5 package and not runtime code to make the integration work with existing and new installation methods. (commit)

7.0.1 (2023-10-12)

Other changes

  • Added catching and emitting errors that happen during editor initialization. Closes #392. (commit)
  • Updated the required version of Node.js to 18 when developing the repository. See ckeditor/ckeditor5#14924. (commit)

7.0.0 (2023-07-10)

BREAKING CHANGES

Bug fixes

  • Do not run change detection if error does not have observers. (commit)

Other changes

6.0.1 (2023-04-18)

Other changes

6.0.0 (2023-04-07)

BREAKING CHANGES

  • Due to rewriting to TypeScript, the component requires CKEditor 5 typings that are available in version 37 or higher. See ckeditor/ckeditor5#11704.
  • Upgraded the minimal versions of Node.js to 16.0.0 due to the end of LTS.

Features

Other changes

  • Updated the required version of Node.js to 16. (commit)

6.0.0-alpha.0 (2023-03-30)

BREAKING CHANGES

  • Due to rewriting to TypeScript, the component requires CKEditor 5 typings that are available in version 37 or higher. See ckeditor/ckeditor5#11704.
  • Upgraded the minimal versions of Node.js to 16.0.0 due to the end of LTS.

Features

Other changes

  • Updated the required version of Node.js to 16. (commit)

5.2.0 (2023-03-02)

Features

  • Added the editorWatchdogConfig property that allows defining configuration for the Watchdog feature. Closes #351. (commit)

5.1.1 (2023-02-16)

Bug fixes

  • Added support for OnChanges lifecycle hook that updates editor content when data-bound property of a component changes. Closes #215. (commit)

Other changes

  • Removed the @types/ckeditor__ckeditor5-utils dependency to avoid issues with CKEditor 5 typings when building an application using CKEditor 5 sources (TypeScript). (commit)
  • Replaced the minimal required version of the @ckeditor/ckeditor5-watchdog package with a caret range. (commit)

5.1.0 (2023-02-09)

Features

  • Added an optional option called disableTwoWayDataBinding that allows disabling the two-way data binding. It increases performance when working with large documents. Closes #141. (commit)

Bug fixes

Other changes

5.0.0 (2023-02-01)

BREAKING CHANGES

  • The minimal supported version of Angular by the <CKEditor> component is 13.
  • Make sure to install the @ckeditor/ckeditor5-watchdog package that is defined as a peer dependency of the <CKEditor> component in your integration.

Other changes

  • Upgraded dependencies to fix vulnerability issues. (commit)

4.0.0 (2022-04-12)

BREAKING CHANGES

  • Due to introducing the lock mechanism for the Editor#isReadOnly property, the <CKEditor> component uses the new way of enabling the read-only mode in the editor. The component requires an instance of CKEditor 5 in version 34 or higher. See ckeditor/ckeditor5#10496.

Other changes

  • Aligned the <CKEditor> component API to use the new lock mechanism when enabling/disabling the read-only mode. (commit)
  • Bumped Karma test runner to v6.x. Closes #308. (commit)
  • Upgraded the CKEditor 5 packages to their latest versions. Closes #304. (commit)

3.0.0 (2022-03-09)

BREAKING CHANGES

  • Upgraded the minimal versions of Node.js to 14.0.0 due to the end of LTS.

Other changes

2.0.2 (2021-07-12)

Bug fixes

Other changes

  • Added support for Angular 11. Internal: Updated internal Angular deps to v. 11. Closes #235. (commit)

2.0.1 (2020-10-15)

Internal changes only (updated dependencies, documentation, etc.).

2.0.0 (2020-10-15)

BREAKING CHANGES

  • Angular<9 will not work with the new ckeditor5-angular library anymore (it's mostly connected with an update of TypeScript to version TS 4.0, which produces declaration files incompatible with the previous TypeScript versions used by older versions of Angular).

Other changes

  • Bumped up all internals to match the Angular@10 ecosystem. Bumped up peer dependencies and dependencies of the library - to Angular>=9. Building an Angular app with the ckeditor5-angular library on production with sourcemaps turned on will no longer throw errors. Closes #182, #194. (commit)

1.2.3 (2020-03-26)

Bug fixes

  • Changing disabled property on the <ckeditor> component while using the watchdog property won't throw an error anymore. Closes #177. (496b39f)

1.2.2 (2020-03-04)

Bug fixes

  • Fixed typings for Watchdog to make old TS compilers happy. Closes #172. (2a3d121)

1.2.1 (2020-02-28)

Bug fixes

  • Added ckeditor5-watchdog to package dependencies. (b4278d1)

1.2.0 (2020-02-27)

Features

  • Improved Angular integration to handle Context and ContextWatchdog. Closes #165. (87a1c89)

1.1.2 (2019-11-04)

Bug fixes

  • Downgraded the ng-packagr package to fix the ng build --prod (#153). (5c9de91)

1.1.1 (2019-10-31)

Bug fixes

  • Fixed displaying events in simple-usage sample. (50441c1)
  • The <ckeditor> component won't call the CVA registerOnChange() when the change comes from the CVA. This will fix an issue with changing editor data in Reactive Forms. Closes #139. (4fd431e)

Other changes

  • Added example of integration reactive forms with <ckeditor> component. (3f19f92)
  • Removed usages of Angular 2+ from code and READMEs. Added information about supported Angular versions. Closes #95. (3244433)

1.1.0 (2019-04-15)

Features

  • Re-exported CKEditorModule, CKEditorComponent and typings from the package entry point. Closes #66. (2a6f55e)

Bug fixes

  • Fixed integration with collaboration features by changing the way how the initial data is passed to an editor instance. Previously the <ckeditor> component was using the editor.setData() method which produces invalid results in collaboration. Now, the initial data is injected directly into the container on which the editor will be created. Closes #75. (63c0073)

Other changes

  • Improved performance by processing data only when effectively needed. Closes #82. Closes #83. (0e4638e)
  • Added support for config.initialData introduced in CKEditor 5 v12.1.0. Effectively, the editor data can now be provided by config.initialData or data properties. Closes #89. (2b96fa3)
  • Upgraded the minimal versions of Node and npm. See: ckeditor/ckeditor5#1507. (47f4ca4)

1.0.1 (2018-11-05)

Internal changes only (updated dependencies, documentation, etc.).

1.0.0 (2018-10-09)

Bug fixes

  • The editor data is set to an empty string when the ngModel initializes or resets. (9abe65d)

Other changes

  • Added reset button to the form sample. Closes #31. (0d973eb)
  • The package will now work fine with Angular@5 so we decided to lower the minimal version of Angular to >=5.0.0. Closes #39. (078c2d2)

1.0.0-beta.1 (2018-07-26)

First developer preview. It contains ready-to-use <ckeditor> component that allows using CKEditor 5 Builds and CKEditor 5 Framework in Angular 2+ applications.