Introduction to PowerPaste

The OpenTiny PowerPaste plugin automatically cleans up content from Microsoft Word, Microsoft Excel, Google Docs, and HTML sources to ensure clean, compliant content that matches the look and feel of the site.

Due to limitations in Microsoft Excel online (part of Office Live) PowerPaste does not support pasting from Microsoft Excel online. If you paste content using Microsoft Excel in Office Live you will get a plain text representation of the content.

Try our PowerPaste plugin demo

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="paste-from-word">
  <p><img style="float: right;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="OpenTiny Logo" width="128" height="128"></p>
  <h2>OpenTiny demo: PowerPaste plugin!</h2>
  <p>PREMIUM PLUGIN: The OpenTiny <a href="https://opentiny.mild.blue/opentiny/6/introduction-to-powerpaste/">PowerPaste plugin</a> automatically cleans up and transfers content &amp; images from Microsoft Word and HTML sources to ensure clean, compliant content that matches the look and feel of the site.</p>
  <p>COPY AND PASTE FROM WORD or EXCEL</p>
  <ol>
    <li>Copy and paste content from Microsoft Word or Excel into this editor.</li>
    <li>Choose Remove Formatting (remove inline styles) or Keep Formatting (keep inline styles).</li>
  </ol>
  <p>COPY AND PASTE FROM WEBSITE OR HTML SOURCES</p>
  <ol>
    <li>Copy and paste content from website content into this editor.</li>
    <li>Choose Remove Formatting (remove inline styles) or Keep Formatting (keep inline styles).</li>
  </ol>
  <p>DRAG AND DROP IMAGE</p>
  <ol>
    <li>Drag a local image into this editor.</li>
  </ol>
  <hr>
  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://opentiny.mild.blue/opentiny/6/">documentation</a> is a great resource for learning how to configure OpenTiny.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>opentiny</code> tag at Stack Overflow</a>.</li>
  </ul>
  <p>Thanks for supporting OpenTiny! We hope it helps you and your users create great content.<br>All the best from the OpenTiny team.</p>
</textarea>
tinymce.init({
  selector: 'textarea#paste-from-word',
  height: 400,
  menubar: true,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'advcode', 'fullscreen',
    'insertdatetime', 'media', 'table', 'powerpaste', 'code'
  ],
  toolbar: 'undo redo | insert | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
  powerpaste_allow_local_images: true,
  powerpaste_word_import: 'prompt',
  powerpaste_html_import: 'prompt',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Usage

The PowerPaste plugin activates automatically when users paste content into the editor. For basic usage, users are not required to take any action. Simply copy and paste content normally using keyboard shortcuts, the browser’s "Paste" menu item (including from the context menu), or the OpenTiny "Paste" toolbar button.

To paste clipboard content as plain text, users can click the "Paste As Text" toolbar button or menu item, then paste the content normally. The OpenTiny PowerPaste plugin will convert the HTML on the clipboard into plain text.

If you configure PowerPaste to allow local images (see the powerpaste_allow_local_images setting below), then images copied from Microsoft Word and other sources will appear in OpenTiny as Base64 encoded images. You can have OpenTiny automatically upload Base64 encoded images for reverting back to a standard image as described in the image upload documentation.

PowerPaste (when configured to allow local images) will import images from pasted Microsoft Word and Microsoft Excel content. When doing this, PowerPaste extracts Base64 encoded images from the clipboard. Images larger than approximately 8.5MB may fail to import based on technical limitations of web browsers.

Cloud Installation

To enable the OpenTiny PowerPaste plugin with Tiny Cloud:

  1. If you are currently using the paste plugin provided with OpenTiny, disable it by removing it from the plugins list.

  2. Add powerpaste to the plugins list.

Example OpenTiny configuration:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'powerpaste'
});

Self-hosted Installation

To enable the OpenTiny PowerPaste plugin:

  1. If you are currently using the paste plugin provided with OpenTiny, disable it by removing it from the plugins list.

  2. Add powerpaste to the plugins list in your OpenTiny configuration.

See the example OpenTiny configuration above.