CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Pasting content from Microsoft Excel Documentation

Overview

The Paste from Excel feature is provided through the Paste from Word plugin. It was introduced in CKEditor 4.7 and is available in the Standard and Full distributions by default.

This feature allows you to paste content from Microsoft Excel while maintaining the original structure and formatting. After creating an Excel spreadsheet, you can simply copy it and paste into CKEditor 4 and retain text formatting, row and column size or cell formatting.

If the plugin is enabled, it automatically detects Excel content and transforms its structure and formatting to clean HTML. It also adds the   toolbar button which makes it possible to paste clipboard data this way only on demand.

Pasting content without filtering

To test how Paste from Excel works, download the sample Excel document, open it in Microsoft Excel, copy the content and paste it into CKEditor 4. Check the clean HTML source code generated by CKEditor 4 using the Source button.

Pasted content may be filtered by additional Advanced Content Filter rules - see the second sample below. The content appearance in CKEditor 4 also depends on styling used in contents.css files.

Filtering pasted content with ACF

The second editor shows the content filtering possibilities in CKEditor 4 - you can see that it is not possible to paste colored or aligned text into it. It can be helpful when creating some official documents.

Related Features

Sample Excel Document

Get Sample Source Code

  • Paste from Excel 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Paste from Excel</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/full-all/ckeditor.js"></script>
</head>

<body>
  <style type="text/css">
    /* Minimal styling to center the editor in this sample */
    .container {
      padding: 30px;
      display: flex;
      align-items: center;
      text-align: center;
    }

    .inner-container {
      margin: 0 auto;
    }
  </style>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&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>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&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', {
      // Make the editing area bigger than default.
      height: 350,
      width: 760,

      // Allow pasting any content.
      allowedContent: true,

      // Fit toolbar buttons inside 3 rows.
      toolbarGroups: [{
          name: 'document',
          groups: ['mode', 'document', 'doctools']
        },
        {
          name: 'clipboard',
          groups: ['clipboard', 'undo']
        },
        {
          name: 'editing',
          groups: ['find', 'selection', 'spellchecker', 'editing']
        },
        {
          name: 'forms',
          groups: ['forms']
        },
        '/',
        {
          name: 'paragraph',
          groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']
        },
        {
          name: 'links',
          groups: ['links']
        },
        {
          name: 'insert',
          groups: ['insert']
        },
        '/',
        {
          name: 'styles',
          groups: ['styles']
        },
        {
          name: 'basicstyles',
          groups: ['basicstyles', 'cleanup']
        },
        {
          name: 'colors',
          groups: ['colors']
        },
        {
          name: 'tools',
          groups: ['tools']
        },
        {
          name: 'others',
          groups: ['others']
        },
        {
          name: 'about',
          groups: ['about']
        }
      ],

      // Remove buttons irrelevant for pasting from external sources.
      removeButtons: 'ExportPdf,Form,Checkbox,Radio,TextField,Select,Textarea,Button,ImageButton,HiddenField,NewPage,CreateDiv,Flash,Iframe,About,ShowBlocks,Maximize',
    });
    CKEDITOR.replace('editor2', {
      // Make the editing area bigger than default.
      height: 350,
      width: 760,

      // Define the toolbar: https://ckeditor.com/docs/ckeditor4/latest/features/toolbar
      // The full preset from CDN which we used as a base provides more features than we need.
      // Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
      toolbar: [{
          name: 'document',
          items: ['Source', 'Print', 'PageBreak']
        },
        {
          name: 'clipboard',
          items: ['PasteFromWord', '-', 'Undo', 'Redo']
        },
        {
          name: 'paragraph',
          items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
        },
        {
          name: 'insert',
          items: ['Image', 'Table']
        },
        {
          name: 'align',
          items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        },
        {
          name: 'editing',
          items: ['Scayt']
        },
        '/',
        {
          name: 'styles',
          items: ['Format', 'Font', 'FontSize']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
        },
        {
          name: 'colors',
          items: ['CopyFormatting', 'RemoveFormat', '-', 'TextColor', 'BGColor']
        }
      ],

      disallowedContent: '*{*color}; *{*align}'
    });
  </script>
</body>

</html>