Report: 2024 State of Collaborative Editing

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

Read now

CKEditor 4.8 with pasting images from Word and balloon toolbar

CKEditor 4 release

Good news, everyone! We are happy to announce the release of the latest major CKEditor version. CKEditor 4.8 comes with plenty of new features - including pasting images from Microsoft Word, clipboard enhancements for Microsoft Edge and a brand new Balloon Toolbar plugin. Read on for a detailed overview of all the new features!

Pasting images from Microsoft Word

Thanks to further improvements to Paste from Word plugin and our clipboard API you can now safely paste multiple images from Word straight into CKEditor 4 and have them uploaded in the background instantly.

Copying images from Word into CKEditor 4.8.
Copying images from Word into CKEditor 4.8.

This feature works closely with CKFinder (or any other file manager you have integrated with CKEditor) so that it automatically uploads your images to your local or cloud storage.

Please note that pasting images from Word is supported in the latest versions of Chrome, Firefox and Edge. For more details see the dedicated GitHub issue.

Improved clipboard handling in Edge

With Edge team partially implementing the Clipboard API, we could enable our improved clipboard handling, which is a fantastic news for all CKEditor 4 users running on Edge.

This means that Edge will get all the benefits of the Clipboard API when copying and pasting from the most widely-used Office suite applications such as Word, Excel, Outlook and PowerPoint. This also enables reading custom clipboard information like images - thanks to access to dataTransfer object.

Balloon Toolbar

This feature provides you with a very easy way of defining a customized toolbar (based on your editor selection) so that you can display a set of dedicated buttons for images, pieces of content and links. You can reuse it when writing your own plugins to easily provide your own contextual toolbar for specific elements of your choice.

It is also partly a preparation for introducing the Easy Image service to CKEditor 4 in the beginning of 2018. This CKEditor Cloud Services feature will enable the end user to insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. All this with virtually zero server setup.

Balloon Toolbar in CKEditor 4 with Easy Image feature.
retina

The Balloon Toolbar feature opens up many exciting opportunities for CKEditor 4, like providing a contextual toolbar for tables, widgets, lists and more!

Give it a try on our Balloon Toolbar SDK sample, and if you would like to get more technical information make sure to check a dedicated issue on GitHub.

Upload Image is now enabled by default

Starting with 4.8 release the Upload Image plugin is now included in the Standard and Full distributions.

This means that all you have to do to integrate image uploading is just set config.filebrowserImageUploadUrl and you are good to go.

Other fixes

As always, the release was not limited to features and comes with a number of other minor tweaks and bug fixes. Just to name a few:

  • Font size and Family and Format drop-downs are not toggleable anymore. Default option to reset styles added - GitHub issue #584.
  • Fixed: The “Object Styles” group in the Styles Combo plugin is visible only if the whole element is selected - GitHub issue #862.
  • Fixed: A list is pasted from OneNote in the reversed order - GitHub issue #796.

Release notes

Check out the release notes for the full list of changes.

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

With the release of CKEditor 4.7, we migrated CKEditor issue tracking to GitHub. 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.

Feedback needed!

We are really enthusiastic about this new, major CKEditor version and its numerous new features. We will be happy to hear from you and thankful for any suggestions that will help us improve these features and tailor them to your expectations.

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