Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

CKEditor 4.17 with enhanced Base64 images support, delayed editor initialization, and security fixes

Computer in the center. Vue, Angular and React icons floating near the mentioned laptop

We are happy to announce the release of CKEditor 4.17. In this major release, we are introducing a highly requested feature allowing developers to reattach the editor to the HTML DOM and delay its initialization. This release also comes with improved Base64 images support for clipboard operations, discontinued support for Flash plugin, and other enhancements prepared by both CKEditor 4 team and our lovely community!

Security fixes

A potential security vulnerability in CKEditor 4 HTML processing core module (CVE-2021-41165) has been fixed. The vulnerability allowed to inject malformed comments HTML bypassing content sanitization, which could result in executing JavaScript code. Thanks for reporting this to William Bowling.
There was also a potential security vulnerability in CKEditor 4 Advanced Content Filter (ACF) core module (CVE-2021-41164), that allowed to inject malformed HTML bypassing content sanitization, which could result in executing JavaScript code. Reported by Maurice Dauer. Thanks!

Detaching editor from the HTML DOM Tree

There were two large important changes introduced related to detaching the editor from the HTML DOM:

The first one is the option to delay editor initialization, so the editor will try to initialize itself after attaching the editor element to the DOM. Delayed editor creation starts when you invoke casual replace() or inline() methods, but the editor is not created immediately. The instance creation is postponed and could be resumed automatically or on-demand.

This feature is useful for 3rd party integrations like Angular, React, and Vue, where the process of initializing DOM may be asynchronous.

The other introduced change is the possibility to reattach the editor once it has been attached to the DOM and it will be completely functional after that procedure. This feature also finds its place in framework integrations and dynamic web pages where the same editor instance could be reused in other parts of the application.

You can read more about these newly introduced changes in the dedicated Delayed editor creation guide.

Base64 images handling improvements

We have improved the way Base64 images are served in the editor and introduced two new ways to insert this kind of image into the content. Pasting images as Base64 from the clipboard in all browsers except Internet Explorer. It is also now possible to drag and drop images straight into the content as Base64.

Flash support ended

Adobe has ended its support of Flash Player on December 31, 2020, and blocked Flash content from running in Flash Player beginning January 12, 2021.
Due to that fact, we have decided to deprecate and remove the Flash plugin from CKEditor 4 to help protect users’ systems and discourage using insecure software. This change will not break your current editor configuration, but the Flash plugin will no longer be active.

Other improvements

We would like to acknowledge the work of our great community and the improvements brought by community contributors:

You can find more improvement and new changes in the release changelog, so be sure to read it!

Important bug fixes

Learn more about fixed issues in 4.17 by reading our release changelog!

Release version

Due to a regression in CKEeditor 4.17.0 version that was only revealed after the release and affected a limited area of operation, CSS assets loaded via relative links started to point into invalid location when loaded from external resources.

We have therefore decided to immediately release CKEditor 4.17.1 that fixed this problem. If you have already upgraded to v4.17.0, make sure to upgrade to v4.17.1 to avoid this regression.

Release notes

Check out the release notes and contact us for more information.

Download

Download CKEditor now and upgrade your installation or use your favorite package manager to install it!

License

CKEditor is available under Open Source and Commercial licenses. Full details can be found on our license page.

Reporting issues and contributing

Please report any new issues in the CKEditor 4 development repository and follow the instructions in the issue template. You can also contribute code and provide editor patches through pull requests.

Support

Community support is available through Stack Overflow. Visit the resources page for additional options.

Related posts

Subscribe to our newsletter

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

Input email to subscribe to newsletter

HiddenGatedContent.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

HiddenGatedContent.
Hidden unused field.

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.

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