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:
will look like below after pasting to CKEditor 4 with the Paste from Google Docs plugin enabled:
Here is another sample with some more complicated formatting and styling as well as an image:
It will look like this after pasting into CKEditor 4:
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.
# Related Features
Refer to the following resources for more information about pasting content:
- The Pasting content from Microsoft Word article contains more information about the Paste from Word feature.
- The Pasting content from Microsoft Excel article contains more information about the Paste from Excel feature.
- The Pasting content from LibreOffice Writer article contains more information about the Paste from LibreOffice feature.
- The Clipboard Integration article explains how Clipboard API is implemented in CKEditor 4.
- The Uploading Dropped or Pasted Files article describes drag&drop in CKEditor 4.
- The Content Filtering (ACF) is an introduction to CKEditor’s unique content filtering system.
- The Applying Styles to Editor Content article discusses creating more semantically correct text styles.