« See all

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.

CKEditor 4, a full-featured WYSIWYG editor for Angular.
CKEditor 4, a full-featured WYSIWYG editor for Angular.

# 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. We offer a similar integration with React and we have already started working on an official integration with 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

The CKEditor 4 Angular integration is stable, but we still deem it a beta version. 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 integration is ready and Vue.js is already on our roadmap!

If you are looking for a modern, customizable, and powerful rich-text editing framework with a native Angular integration, check out CKEditor 5.

Share this post

Linkedin Reddit
CKEditor 5 v12.2.0 with mobile-friendly comments mode
CKEditor 4 - Integrate WYSIWYG editor with React