Contribute to this guideReport an issue

Creating Data Grids with Spreadsheet Plugin Documentation

The optional, commercial Spreadsheet plugin, introduced in CKEditor 4.13, offers Excel-like functionality available right inside CKEditor 4. It allows you to create intelligent, data-driven documents in your WYSIWYG editor. This makes it a perfect solution for financial, auditing, engineering, technical and science industries.

This feature is provided as a commercial product and provides integration with our partner solution, Handsontable. A license can be purchased here.

When enabled, the Spreadsheet plugin allows you to insert advanced spreadsheet widgets into your rich-text content and provides the following features:

  • 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 like adding, removing and 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.

For a more detailed Spreadsheet plugin functionality overview, refer to the Creating Data Grids with Spreadsheet Plugin article. See the Spreadsheets Integration guide for information about how to install and configure the plugin.

Some of the existing CKEditor 4 features are not supported in the spreadsheet widget at the moment. This means that applying content changes with the Text and Background color, the Styles, Format and Font Size and Family dropdowns or inserting emoji inside the spreadsheet widget content will have no effect.

Related Features

Get Sample Source Code

  • Creating data grids with Spreadsheet plugin
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Creating data grids with Spreadsheet plugin</title>
      <script src="https://cdn.ckeditor.com/4.13.0/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10" data-sample-short>&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          width: 'auto',
          height: 550,
          extraAllowedContent: 'h1;a[!href]',
    
          spreadsheet_licenseKey: LICENSE_KEY,
    
          plugins: (CKEDITOR.env.edge ? '' : 'spreadsheet,') + // Edge browser is not supported at the moment.
            'ajax,' +
            'link,' +
            'undo,' +
            'justify,' +
            'enterkey,' +
            'about,' +
            'basicstyles,' +
            'clipboard,' +
            'elementspath,' +
            'floatingspace,' +
            'htmlwriter,' +
            'removeformat,' +
            'sourcedialog,' +
            'tab,' +
            'toolbar,' +
            'undo,' +
            'resize,' +
            'wysiwygarea,' +
            'contextmenu,' +
            'colorbutton,' +
            'pastefromword,' +
            'pastefromgdocs,' +
            'image,' +
            'format,' +
            'font,' +
            'list,' +
            'magicline,' +
            'maximize,' +
            'print,' +
            'table',
    
          toolbar: [{
              name: 'styles',
              items: ['Format', 'Font']
            },
            {
              name: 'insert',
              items: ['Spreadsheet', 'Table', 'Image']
            },
            {
              name: 'basicstyles',
              items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat']
            },
            {
              name: 'colors',
              items: ['TextColor', 'BGColor']
            },
            {
              name: 'align',
              items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
            },
            {
              name: 'links',
              items: ['Link', 'Unlink']
            },
            {
              name: 'paragraph',
              items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent']
            },
            {
              name: 'clipboard',
              items: ['Undo', 'Redo']
            },
            {
              name: 'document',
              items: ['Print']
            },
            {
              name: 'tools',
              items: ['Maximize']
            }
          ]
        });
      </script>
    </body>
    
    </html>