2024 Rich Text Editing Developer Survey

Share your thoughts on the future of collaborative rich text editing. (Our survey takes about 10 mins)

Have your say

An all around experience for working with data and content - CKEditor 4 Spreadsheets 1.2.0 released

We are happy to announce the release of CKEditor 4 Spreadsheets 1.2.0, which brings several improvements to make your work with data and content even easier than before. The Spreadsheet plugin now supports pasting data to and from Excel and Google Sheets. It also enables creating dynamic, auto-updating cell references in your WYSIWYG editor’s content. Last but not least, even deeper integration with CKEditor 4 allows you to apply more formatting and styling features to spreadsheet data.

CKEditor 4 Spreadsheets provides Excel-like functionality built into a WYSIWYG editor. The Spreadsheet plugin allows you to create intelligent, data-driven documents directly in CKEditor 4. This makes it a perfect solution for the financial, auditing, engineering, technical and science industries. In the last few months, we have been working on some important enhancements that would make this feature even more useful and intuitive to use. Here is a summary of the key improvements.

# Pasting from Microsoft Excel and Google Sheets

Microsoft Excel and Google Sheets are often the go-to applications for storing and managing your tabular data. CKEditor 4 Spreadsheets is now able to automatically convert data copied and pasted into the editor into an advanced, fully-functional spreadsheet.

Copying data from Google Sheets and pasting it into CKEditor 4 Spreadsheets.
Copying data from Google Sheets and pasting it into CKEditor 4 Spreadsheets.

This is especially useful when you are creating reports and analyses in your WYSIWYG editor and need to incorporate spreadsheet data. Being able to pull the data from Excel or Google Sheets files and continue working on it right inside the editor is a huge time saver.

# Referencing cell values in the editor content

Since we are talking about creating reports and analyses in your editor with spreadsheet data right inside, dynamic cell references is another useful feature that will come in handy. It allows you to create a reference to any spreadsheet cell inside your CKEditor 4 content.

Creating references is super simple thanks to an intuitive auto-complete panel showing the best matching suggestions for a query. It supports fuzzy matching, which means you need to only type a part of the spreadsheet, row or column name to get relevant suggestions. To display the cell referencing suggestion panel, just type the $ sign.

Creating auto-updating cell references in CKEditor 4 Spreadsheets.
Creating auto-updating cell references in CKEditor 4 Spreadsheets.

Whenever the spreadsheet cells are updated or their values change, the references are also auto-updated. This keeps the entire content up to date with no user action needed. Building complex reports that refer to data stored in a spreadsheet will now be a breeze!

Check the dedicated cell referencing demo available in the documentation that explains how to make use of the fuzzy matching mechanism.

# Even more rich-text features for your spreadsheets

This release also strengthens the integration of the rich-text functionality provided by CKEditor 4 with spreadsheet instances. Would you like to format or style your data using features from our WYSIWYG editor to change the cell text or background color, font size or family, set cell alignment, add bold, italic or strike-through? No problem! Just use the CKEditor 4 toolbar buttons to create a consistent styling for the entire document.

Formatting spreadsheet data using rich-text editor features in CKEditor 4 Spreadsheets.
Formatting spreadsheet data using rich-text editor features in CKEditor 4 Spreadsheets.

# Spreadsheets for smart documents

Sorting and filtering data, setting fixed data types with validation, or using formulas and conditional formatting are all handy features that are well-known from Microsoft Excel or Google Sheets. However, they have not been available in WYSIWYG editors. Until now!

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 your data and rich-text content in one place, you can maximize the effectiveness of your team and improve your document workflow. With one click you can switch between a native HTML table and a spreadsheet widget, preserving all your data.

# Your data stays with you

While spreadsheet solutions are sometimes available in the cloud, in some scenarios it is not possible to use some of 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+ build, install it on your own server, and have full control over 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/without a header row or column, and with any number of rows and columns.
  • Creating auto-updating references to spreadsheet cells right inside the editor content.
  • Auto-converting data pasted from Microsoft Excel and Google Sheets into a Spreadsheet instance.
  • Converting existing tables to spreadsheet instances and vice versa.
  • Inserting spreadsheets using predefined templates.
  • Spreadsheet structure manipulation (adding, removing or resizing rows and columns).
  • Renaming row and column headers.
  • Single and multi-column sorting.
  • Basic data styling (bold, italic, underline, etc.).
  • Changing cell alignment, text and background color, font size and font family.
  • 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 CKEditor 4 Spreadsheets.

# Try out Spreadsheets!

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

If you would like to have a deeper look and integrate Spreadsheets with your CKEditor 4-powered application, you can sign up for a 30-day 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.

# License

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 Spreadsheets integration can bring to CKEditor 4. We appreciate any suggestions, ideas, comments and new features that you can send us. Let us know what else we could work on to increase the usefulness of our software and bridge any existing gaps between CKEditor 4 and your applications.

Use the official CKEditor 4 GitHub repository to report issues.

Related posts

Subscribe to our newsletter

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

Thanks for subscribing!

We use cookies and other technologies to provide you with a better user experience.

Learn more about cookies policy

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