How to copy and paste Google Docs to HTML cleanly

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>

4. Save the changes, and test run the paste process from your Google Document.

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

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:

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

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:

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

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:

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

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:

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.