Official Angular 2+ component for CKEditor 4.

Usage no npm install needed!

<script type="module">
  import seoBoosterWtfCkeditor4Angular from 'https://cdn.skypack.dev/@seo-booster/wtf-ckeditor4-angular';


CKEditor 4 WYSIWYG editor Angular component

npm version Build Status
Dependency Status devDependency Status

The official CKEditor 4 WYSIWYG editor component for Angular.

This is the beta version of the CKEditor 4 Angular integration. We are looking forward to your feedback! You can report any issues, ideas or feature requests on the integration issues page.

CKEditor 4 screenshot


In order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:

npm install --save ckeditor4-angular

After installing, import CKEditorModule to your application:

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule( {
    imports: [
} )

You can now use the <ckeditor> tag in the component template to include the rich text editor:

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

The data attribute used in the example above is responsible for setting the editor’s data.

Documentation and examples

See the CKEditor 4 Angular Integration article and Angular examples in the CKEditor 4 documentation.

Browser support

The CKEditor 4 Angular component works with all the supported browsers except for Internet Explorer 8-10.


Here is how you can contribute to the development of the component. Any feedback and help will be most appreciated!

Reporting issues and feature requests

All issues and feature requests should be reported in the issues section of the official GitHub repository for the CKEditor 4 Angular integration.


Clone the CKEditor 4 Angular integration repository.

Once you have cloned it, install dependencies by running:

npm install

The structure of the repository

This repository contains the following code:

  • ./src/ckeditor contains the CKEditor component,
  • ./src/app is a demo application using the component.

Development server

Run ng serve to start the development server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Building samples

Run ng build to build the samples. The build artifacts will be stored in the samples/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.


To build and publish the package, run npm run publish.

You can also manually build the package with npm run build-package which will be stored in dist/. Then you can publish it with npm publish dist/.


Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.

For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license