https://github.com/ckeditor/ckeditor5-angular

Official CKEditor 5 Angular 5+ component.
https://github.com/ckeditor/ckeditor5-angular

Last synced: 10 days ago
JSON representation

Official CKEditor 5 Angular 5+ component.

• Host: GitHub
• URL: https://github.com/ckeditor/ckeditor5-angular
• Owner: ckeditor
• License: other
• Created: 2018-05-14T14:48:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2025-03-18T07:44:21.000Z (8 months ago)
• Last Synced: 2025-04-18T00:37:59.778Z (7 months ago)
• Language: TypeScript
• Homepage: https://ckeditor.com/ckeditor-5
• Size: 5.56 MB
• Stars: 211
• Watchers: 24
• Forks: 114
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-wysiwyg - ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+. (For Angular)
• awesome-wysiwyg-editors - ckeditor5-angular - 用于 Angular 2+ 的官方 CKEditor 5 富文本编辑器组件。  (基于 Angular)
• awesome-angular - ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+. (Framework Interoperability / Wrappers)
• fucking-awesome-angular - ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+. (Framework Interoperability / Wrappers)
• fucking-awesome-angular - ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+. (Table of contents / Angular)

README

          
# CKEditor 5 rich text editor component for Angular

[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-angular.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular)

[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5-angular.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-angular?branch=master)

[![Coverage Status](https://codecov.io/github/ckeditor/ckeditor5-angular/graph/badge.svg)](https://codecov.io/github/ckeditor/ckeditor5-angular)

![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-angular)

Official [CKEditor 5](https://ckeditor.com/ckeditor-5/) rich text editor component for Angular 13+.

## [Developer Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html) 📖

See the ["Rich text editor component for Angular"](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html) guide in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest) to learn more:

* [Quick start](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#quick-start)

* [Integration with `ngModel`](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#integration-with-ngmodel)

* [Supported `@Input` properties](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-input-properties)

* [Supported `@Output` properties](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#supported-output-properties)

* [Styling](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#styling)

* [Localization](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#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

    

    

      ^10

      16+

      Requires CKEditor 5 in version 46 or higher.

    

    

      Past releases (no longer maintained)

    

	

      ^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 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`](https://github.com/ckeditor/ckeditor5-angular/blob/master/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:

```bash

pnpm install

```

### The structure of the repository

This repository contains the following code:

* `./src/ckeditor` contains the implementation of the `` component,

* `./src/app` is a demo application using the component.

**Note:** The [npm package](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular) contains a [packaged component](#packaging-the-component) only.

### Testing the component (demo)

To open the demo application using the component, run:

```bash

pnpm run start

```

To test it in production, use:

```bash

pnpm run start --configuration production

```

To run unit tests, use:

```bash

pnpm run test

```

To run e2e tests, run:

```bash

# Prepare the server.

pnpm run start

# Then, start tests.

pnpm run test:e2e

```

To run coverage tests, run:

```bash

pnpm 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`.

1. Prepare a release branch: `git checkout -b release-[YYYYMMDD]` where `YYYYMMDD` is the current day.

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

1. Commit all changes and prepare a new pull request targeting the `#master` branch.

1. 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](http://www.gnu.org/licenses/gpl.html),

* or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).