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

CKEditor 4.20.2 with improved navigation, API changes, and bugfixes

Categories:

Tags:

The CKEditor 4.20.2 maintenance release comes with improved navigation over dialog radio buttons, various bug fixes, and important API changes.

# Improved dialog radio buttons navigation

The editor UI navigation plays a significant role in both the functionality and the user experience, especially in the context of web accessibility. One of the dialog features – the radio buttons – comes with very specific requirements regarding proper keyboard navigation:

  • The Tab or Shift+Tab keys should only focus the selected radio button in the group, otherwise, the first radio button (Tab) or the last (Shift+Tab) one should be selected.
  • The arrow keys move focus to the previous or the next radio button in the group and select that button.
  • Space selects the radio button with focus and de-selects other radio buttons in the group.

In CKEditor 4.20.2 we have revisited the behavior of dialog radio button navigation and made it compatible with the best standards.

Keyboard navigation between radio buttons in action.
Keyboard navigation between radio buttons in action.

# API Changes

Important changes have been introduced to the editor API:

  • The startup data passed to the widget’s command is now used to also populate the widget’s template.
  • We have added the colorButton_contentsCss configuration option. It allows adding custom CSS to the Color Button menu content. Thanks for that contribution go to mihilion!

# Other improvements

  • We have fixed the error thrown after applying formatting to the widget with inline editable and switching to the source mode. Thanks for that contribution go to Glen!
  • We have improved undo mechanism. It is now able to recognize changes in table cells separately. Multiple changes in the table can be undone one by one.
  • Fixed an issue where uploading an image to the editor did not properly propagate the change event, resulting in passing incorrect data in form controls for integration frameworks, such as Reactive forms in Angular.
  • We removed a potential memory leak caused by the Maximize plugin when destroying the editor, where popstate and hashchange events on the window were not properly cleaned up.

# 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.

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