Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to copy and paste Google Docs to HTML cleanly

Joe Robinson

January 31st, 2023

4 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

It’s an acknowledged fact that a perfectly formed document in Google Docs won’t cleanly paste into another document word processor. Which makes it one of the largest content writing obstacles. Why doesn’t it work? Because  when exporting the HTML, its classes and styles remain in the document. 

You could take the time to write a script to automatically remove the styles and classes, and format the output so it’s readable. But something that automates the process, so that you don’t need to waste your time, would be the ideal solution. Especially if you consider that it’s not just styles and classes that aren’t carried over. 

HTML tags for lists, images, and tables don’t transfer either. That means the requirements for this script just increased.

Instead, if your application needs a method for clean Google Docs to HTML copy and paste, the PowerPaste plugin is an automated solution. 

TinyMCE developed the plugin, and has added upgrades and improvements to it over time to handle the demands of Google Docs formatting. And this article guides you through the process of setting it up to handle clean copy paste.

Google Docs to HTML and copy paste

First of all, let’s try pasting some content from Google Docs and see how it goes. 

  1. Open a Google Doc you’re working on or have a link to
  2. Copy some or all of the contents
  3. Paste it into this TinyMCE Demo (without PowerPaste configured):

You can see the effect it has right away: Without PowerPaste configured, the Google Doc HTML for the heading and paragraphs comes across, and some other elements. While there’s other elements and styles missing. You can also try this using MSWord, and an open source word processor to see the extent of the copy and paste obstacles.

Another option is to export the Google doc to HTML, and inspect the code yourself. You may find another big obstacle: specific classes that Google Docs use appear on the HTML tags throughout the doc. You can use regex to remove these, but that can take time.

How to paste from Google Docs with formatting intact: use PowerPaste

PowerPaste processes Google Docs content, and pastes it cleanly – either removing formatting and style, or preserving it.

Since PowerPaste is a premium TinyMCE plugin, you can try it out for free by signing up for a FREE TinyMCE API key, which comes with 14 days trial access to Premium plugins.

Then, you can set up PowerPaste in your TinyMCE configuration:

  1. In a demo index.html file on your development workstation, add a script tag inside the head section
  2. Copy the TinyMCE CDN link into the script tags:
  3. Copy the following TinyMCE configuration for PowerPaste directly after the CDN script tags:
<script>
tinymce.init({
selector : "#mytextarea",
width: 600,
height: 700,

plugins: [
//take out the "paste" plugin first if you're self hosting TinyMCE
"code", //change to advcode if it fits your project
"powerpaste",
"tinymcespellchecker'",
],

toolbar: "code ", //or "advcode" if it fits your project
powerpaste_googledocs_import: "prompt", //Powerpaste will ask how you want to import Googledocs content
paste_tab_spaces: "4", //for any tabs, this converts them to four white spaces - useful for source code
spellchecker_active: true,
spellchecker_language: "en_US", //useful if you write in en_AU or GB, but publish for US audiences
})

</script>
  1. Save the changes, and test run the paste process from your Google Document.

Here’s how PowerPaste works with Google Docs to HTML:

Essential Power Paste working to clean Google Docs Content

There’s a few additional plugins that pair well with PowerPaste when it’s configured for Google Docs copy and paste:

1. Code, or Advanced Code

Opening the Code or Advanced Code dialog box shows the HTML source code behind the rich text editor content. This way, you can confirm that PowerPaste has removed any style attributes attached to the tags.

2. TinyMCE SpellChecker

This is useful for checking spelling when you’re copying from one language format to another. For instance, if you write your content in British English, but you publish in American English, configuring the spell checker to automatically detect the different spellings is a useful PowerPaste addition. It can make preparing text for publication much easier.

Copy and paste a table from Google Docs

HTML tables can present problems when they’re pasted into new locations. PowerPaste can handle tables from Google Docs to HTML:

  1. The following example document has a basic table:

An example Google Doc with a table

  1. When copying and pasting the table alone into TinyMCE with PowerPaste, this is the result:

The effects of TinyMCE powerpaste on tables

Tables can retain their Google Docs HTML when PowerPaste is configured in TinyMCE.

Copy and paste an image from Google Docs

Pasting an image is also possible:

  1. Here’s the demo document once again, this time with an image:

An image ready to be copied and pasted with TinyMCE powerpaste

  1. And here’s the result of retaining the formatting:

The effect of pasting an image with TinyMCE powerpaste cleaning the content

You may need to test out removing formatting, or keeping formatting depending on the image.

What happens when you configure the prompt option

You can configure the import option to either prompt, or automatically clean content pasted into the text area. The PowerPaste documentation contains more information about the three options regarding prompting with a dialog window. The default value is the prompt string.

To demonstrate, here’s the example Google Doc:

An image of a sample Google Doc showing tables

And here’s what happens when pasting with the clean option enabled to remove formatting:

Copy and paste content from a Google Doc sample showing the inline styles removed and replaced with a new style

Finally, here’s what happens if you automatically keep the formatting intact with the merge option. This option retains the structure, but any invalid or proprietary inline styles, attributes, or HTML tags are removed:

Copy and pasted content from a Google Doc sample showing the inline style and formatting retained from Google Docs.

What’s next for your rich text editor HTML?

Since PowerPaste is a Premium plugin, you can sign up for an API key to try out the plugin for FREE, for 14 days.

We also have a demo available for testing the PowerPaste plugin on our website. You can test the prompt configuration to explore how formatting and style is preserved, or automatically removed with PowerPaste. Reach out to us if you have any questions or ideas about how PowerPaste can help you manage content from Google Docs to HTML, or from other sources.

HTMLContent marketingPowerPasteProductivity
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to upgrade TinyMCE 5 to TinyMCE 6

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2023 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing