2024 Rich Text Editing Developer Survey

Share your thoughts on the future of collaborative rich text editing. (Our survey takes about 10 mins)

Have your say

CKEditor 4 - Integrate WYSIWYG editor with Angular

CKEditor 4, WYSIWYG editor, integration 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. 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!

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

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

We use cookies and other technologies to provide you with a better user experience.

Learn more about cookies policy

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });