CKEditor 4 - Integrate WYSIWYG editor with Angular

We are happy to announce the release of the native integration of CKEditor 4, a full-featured WYSIWYG editor, with Angular, one of the most popular JavaScript frameworks. The CKEditor 4 Angular integration is already available on npm. It allows you to implement CKEditor 4 as an Angular component, using the <ckeditor /> tag.

# WYSIWYG editor that fits your needs

We try to make installing and integrating CKEditor 4 as simple and intuitive as possible. Therefore, CKEditor 4 builds are available on npm, CDN and as zip packages. With a native component for Angular, we want to make the process of integrating the WYSIWYG editor even faster.

CKEditor 4 offers plenty of features to fit all editing needs. You can easily customize it and create your own build with a carefully selected set of features with the online builder.

# Is CKEditor 4 compatible with framework XYZ?

Yes. CKEditor 4 is compatible with every JavaScript framework that we have heard of so far. CKEditor 4 is a JavaScript rich-text editing component and it does not require any uncommon techniques or technologies to be used. Therefore, unless the framework that you use has very not typical limitations, CKEditor 4 is compatible with it.

A dedicated CKEditor 4 component for Angular simplifies the process of integrating the WYSIWYG editor with this popular framework. Similar integrations are available for React and Vue.js.

# WYSIWYG editor for Angular

In order to use the CKEditor 4 WYSIWYG editor integration with 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: [
    ...
    CKEditorModule,
    ...
  ],
  …
} )

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 initial editor’s data.

By default, the WYSIWYG editor Angular integration will fetch the latest CKEditor 4 version from the CKEditor CDN. The CKEditor build, the editor type and other configuration options can be easily customized. You can learn more in the official CKEditor 4 Angular integration guide.

# Try it out!

We have created a few samples that show the integration of CKEditor 4 WYSIWYG editor component with Angular.

Check them out to see how to create an editor component and change its type, bind event handlers or use it with Angular directives. Additionally, see how the CKEditor 4 WYSIWYG component works with ngModel.

# Feedback

After a beta phase, a stable release of the CKEditor 4 Angular integration was published on November 21, 2019. We are awaiting your feedback and ideas on how it can be improved further. We also want to thank the community for all comments and issues already reported. Please keep them coming and help us improve the CKEditor 4 WYSIWYG editor Angular integration!

At the same time, we are looking forward to hearing what other frameworks we should support with a native CKEditor 4 WYSIWYG editor integration. The React and Vue.js integrations are already supported!