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

Pasting content from Google Docs Documentation

Overview

The Paste from Google Docs feature is provided through the Paste from Google Docs plugin. It was introduced in CKEditor 4.13 and is available in the Standard and Full distributions by default.

This feature allows you to paste content from Google Docs and maintain original structure and formatting. After creating a Google Docs document, you can simply copy it and paste it into CKEditor 4, retaining images, font styles, heading levels, nested lists, complex tables and other advanced features.

If the plugin is enabled, it automatically detects Google Docs content and transforms its structure and formatting to clean, semantic HTML.

Pasting content without filtering

To test how Paste from Google Docs works, open the sample Google Docs document, copy the content, and paste it into CKEditor 4. You can also check the clean HTML source code generated by CKEditor 4 using the Source toolbar 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 the contents.css files.

You may also test Pasting from Google Docs with even more complex styling by using our Google Docs document with a more complicated structure and styling sample.

Filtering pasted content with ACF

This editor shows the possibilities of content filtering in CKEditor 4 - it enforces the use of only a subset of features, e.g. it filters out tables and images. That can be helpful, for example, while creating official documents. Notice how the table and images will be stripped off during pasting if the original Google Docs document contains any.

For a sample content to paste you can download the sample Google Docs document.

Related Features

Sample Google Docs Document

Get Sample Source Code

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

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Paste from Google Docs</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: 1000,
      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',

      // An array of stylesheets to style the WYSIWYG area.
      // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
      contentsCss: [
        'http://cdn.ckeditor.com/4.25.0-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/css/pastefromgdocs.css'
      ],

      // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
      bodyClass: 'document-editor',
    });
    CKEDITOR.replace('editor2', {
      // 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']
        }
      ],

      // For more information check:
      //  - About Advanced Content Filter: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
      //  - About Disallowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
      //  - About Allowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html
      disallowedContent: 'img table',

      // An array of stylesheets to style the WYSIWYG area.
      // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
      contentsCss: [
        'http://cdn.ckeditor.com/4.25.0-lts/full-all/contents.css',
        'assets/css/pastefromgdocs.css'
      ],

      // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
      bodyClass: 'document-editor',

      // Make the editing area bigger than default.
      height: 1000,
      width: 760
    });
  </script>
</body>

</html>