Published on
Go to blog
Back to articles
Back to search results

CKEditor 4 React integration 2.0.0 with React 17 support

Categories:

Tags:

We are happy to announce the release of the native integration of CKEditor 4, a full-featured WYSIWYG editor, with React, one of the most popular JavaScript frameworks. It provides deep integration of CKEditor 4 and React that lets you use the native features of the WYSIWYG editor inside a React component. This v2.0.0 release brings three most important changes:

  • React v17.x support,
  • React hooks support,
  • TypeScript support and typings.

Compared to v1.x integration which supports React versions lower than 17.x, this stable release also brings the following changes:

  • ESM, CJS and UMD package format support.
  • Support for setting the editor’s initial data as both JSX and HTML string.
  • Ready-to-use, forkable samples for easier testing and bootstrapping.
  • Updated dependencies.

# React hooks in CKEditor 4

While the support for the new versions of React is a natural process that ensures security and stability, the introduction of React hooks is something more. Hooks are the modern way of abstracting business logic in a React app and may be used for smoother development. Moving to hooks or functional components gets in line with modern React design patterns and opens new possibilities.

Refer to the React integration v2 user guide to check the changes. Make sure to read the migration section of the guide with important information on how to implement this new package in your environment. You can also refer to the ready editor samples to see it working.

# Changelog

See the release notes for a full list of changes.

# Download

Download CKEditor 4 React integration v2 now!

# Reporting issues and feature requests

If you miss anything in CKEditor 4 React integration, have some ideas on how the best file uploader for CKEditor could be improved, or if you found a bug, please do not hesitate to report an issue in the CKEditor 4 React integration issue tracker. The tracker is public, so not only can you submit your ideas, but you can also browse existing issues and add your comments there.

# Looking for a different framework?

Looking for integrations for Angular or Vue instead? We have got you covered too, please refer to CKEditor 4 Angular integration and CKEditor4 Vue integration on npm.

Related posts

Subscribe to our newsletter

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

Thanks for subscribing!

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) });