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

How to copy and paste content from Word or Excel to your web application

Joe Robinson

November 30th, 2022

5 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

What if there was a way to get 99.9% accurate clean copy-paste results, everytime? No matter if the content comes from MS Word, MS Excel, (or Google Docs). Sounds amazing, right?

 It’s possible, if your web application has the right component: a reliable core rich text editor and plugin that does  almost perfect clean copy-paste,using the Power Paste plugin.

This article explains how to configure TinyMCE for clean copy-paste of MS Word and Excel (and Google Docs) content. While the options do require some JavaScript for the configuration, setting  the options and values in your web application doesn’t require much time, or a deep knowledge of coding.

How do you copy and paste cleanly?

The first step is to set up TinyMCE, and then configure the TinyMCE Power Paste plugin. Be aware that MS Word and MS Excel content is not directly copied to web-based applications. 

Here’s what’s going on behind the scenes:

  1. When you click the copy button, the contents are saved to the computer clipboard as HTML content.
  2. When you right click and paste into the web application, the browser (Firefox, Safari, Chrome etc) interprets the HTML content from MS Word and Excel.
  3. In most copy and paste cases, they try to get a match as close as possible to the original style and format of the text.

Bear in mind that some design elements, including “word art” from MS Word, don’t have an HTML equivalent that can easily be replicated. 

Setting up TinyMCE for copy-paste

Start with your API key. This key gives you free access to TinyMCE premium plugins for 14 days, including the PowerPaste plugin, as well as avoiding any warning messages concerning domain names in the text area.

  1. Navigate to the Get-Tiny sign up page
  2. Create an account – you can use your GitHub account, or Google account, to sign in
  3. On your local development environment, create an index.html file
  4. With your file open, in the head section, add script tags, and reference TinyMCE Cloud through a CDN link within the script tags. This is what the link looks like:
<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
  1. Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method, and it’s how you control TinyMCE:

<script>
  tinymce.init({
    selector: '#editor',
    plugins: 'powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave',
    toolbar: 'undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat',
    height: '700px
  });
</script>
  1. Add initial HTML content, and the CSS selector class to some textarea tags. The selector is set as an id with the value “editor” in the TinyMCE init script:

<body>
  <h1>TinyMCE Quick Start Guide</h1>
  <form id="post">
       <textarea id="editor"></textarea> {" "}
  </form>
</body>;
  1. Test run the index.html file by opening it in your browser, or use a local server command with Python or with the PHP command:

TinyMCE demo working in the browser

Paste with formatting

With TinyMCE running and the PowerPaste plugin set up, if you want to maintain the formatting of the content, set the powerpaste_word_import option. The formatting option to configure here is to set Word import as ‘merge’. Doing so preserves the formatting and structure. Any invalid HTML content is removed. 

<script>
  …//content script removed for brevity powerpaste_word_import: 'merge', });
</script>;
  1. Paste without formatting

if you want to remove and clean the formatting of the content, the the powerpaste_word_import option has a ‘clean’ option designed for this purpose:

<script>
  …//content script removed for brevity powerpaste_word_import: 'clean', });
</script>;

Copy and paste a table from Word

If you have a table in MS Word, you can copy and paste it directly into TinyMCE’s text area and it can interpret the HTML tags that make up the table. The following is an example of pasting a basic table into TinyMCE with the word import option set to ‘clean’:

A table pasted into TinyMCE from MSWord

Checking on the source code reveals that the spacing was preserved during the paste process, producing a close copy of the original table.

Can you copy comments from Word?

When copying comments from Track Changes in Word, the comments are carried over in the HTML. They appear as concealed HTML notation, however, and you can view them in the text area source code.

For example, if the track change comment looked like this:

A comment in an MS Word-like word processor

That comment appears in the text area HTML as the following:

A comment converted to an comment in HTML format following paste from MS word

Copy and paste from Excel

PowerPaste can handle table content pasted from MS Excel, interpreting the rows and columns as the <td> and <tr> HTML tags.

How to copy paste a table from Excel

You can highlight the parts of the spreadsheet you need, and then copy it, or highlight and copy across rows and columns.

Note: Any blank columns following columns or rows with content, are not copied over, even if they’re highlighted.

For MS Excel, you can configure the powerpaste_html_import option to ‘prompt’, ‘merge’, or ‘clean’ as you need it:

<script>
  //Script content skipped for brevity   //powerpaste_word_import: 'merge',
    powerpaste_html_import: 'prompt', });
</script>;

How to copy and paste a formula from Excel

While the final result of the formula will copy over into the text area, the logic of the formula itself won’t be copied over.

How to copy a graph from Excel

When you’ve created a graph in MS Excel, remember that the chart in the Excel file is essentially an image file. To successfully copy and paste it, you may require some of the following image control options the PowerPaste plugin provides:

  • Allow local images: powerpaste_allow_local_images, when set to true, preserves images in the copied content (specifically Base64 encoded images using data URI).
  • Keep the source when not supported: powerpaste_keep_unsupported_src, when set to true, TinyMCE stores the original src attribute of any unsupported images in a new attribute called “data-image-src”. Post processing can then make use of this attribute to include the image.
  • Images hosted elsewhere: smart_paste detects anything that resembles a URL in relation to pasted images, and changes them into a hyperlink, which is useful for preserving the image if there is a link to it online.

If you need to restrict and prevent certain kinds of images from pasted into the text area, use the image_file_types option. You can see this option in action in the following tutorials:

Why have clean copy-paste?

With the right rich text editor and plugin in place, you can save time when copy-pasting content from MS Word and Excel files, into your web app. 

Using the options available within the TinyMCE PowerPaste plugin, you can gain a clean appearance, everytime, for your copied data. Contact us if you need more information or support on how the PowerPaste plugin can help you preserve your content.

DMSTinyMCEPluginsProduct Development
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 automatically insert special characters in your content

    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