Contribute to this guideReport an issue

Pasting Content from Google Docs

This feature is provided through the Paste from Google Docs plugin that is included in the Standard and Full presets available from the official CKEditor 4 Download site. You can also add it to your custom build with online builder.

The Paste from Google Docs plugin allows you to paste content from Google Docs and maintain original content structure and formatting.

When enabled, it automatically detects Google Docs content and transforms its structure and formatting to clean HTML.

# Supported Features

Paste from Google Docs retains the following formatting:

  • Text formatting
    • Text and background colors
    • Font family, style and size
    • Basic formatting (bold, italic, underline)
    • Font effects (strikethrough, superscript, subscript)
    • Heading levels
    • Text alignment
  • Lists
    • Numbered and bulleted lists
    • Multilevel lists
    • Different numbering formats (Roman, decimal, alphanumeric)
    • Custom start number (e.g. you can start the list from number 4)
  • Tables
    • Borders and shading
    • Cell size (width and height)
    • Cell alignment
  • Images

The Paste from Google Docs plugin maintains most of Google Docs text formatting features with some exceptions related to advanced styling, customizations, or stylings that are not supported by HTML. For example, it will not handle equations created in Google Docs.

# Sample

The following sample content from a Google Docs document:

A sample Google Docs document.

will look like below after pasting to CKEditor 4 with the Paste from Google Docs plugin enabled:

Google Docs content pasted into CKEditor 4 WYSIWYG editor.

Here is another sample with some more complicated formatting and styling as well as an image:

A sample Google Docs document with complex formatting and image.

It will look like this after pasting into CKEditor 4:

Complex Google Docs content pasted into CKEditor 4 WYSIWYG editor.

In the example above you can see that after pasting into CKEditor 4, the first list has different list item markers than in the Google Docs document. Although pasting lists with different markers is supported in CKEditor 4 (check the second and third list in the example above), this is a specific case. Such list style is not natively supported by the browser. However, it can be adjusted by using extra CSS rules (see a related StackOverflow thread how to style it properly).

# Filters

HTML exposed by Google Docs does not comply to rules of valid and semantic HTML. Therefore, a separate filter had to be created to normalize this content. It is implemented in the Paste from Google Docs plugin.

# Paste from Google Docs Demo

See the working “Pasting content from Google Docs” sample that showcases the Paste from Google Docs plugin.

Refer to the following resources for more information about pasting content: