Important changes to Tiny Cloud pricing > Find out more

PowerPaste plugin

Contribute to this page

Note: This plugin is only available for paid TinyMCE subscriptions.

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

Note: 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.

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 TinyMCE “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 TinyMCE 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 TinyMCE as Base64 encoded images. You can have TinyMCE automatically upload Base64 encoded images for reverting back to a standard image as described in the image upload documentation.

Note: 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 TinyMCE PowerPaste plugin with Tiny Cloud:

  1. If you are currently using the paste plugin provided with TinyMCE, disable it by removing it from the plugins list.
  2. Add powerpaste to the plugins list.

Example TinyMCE configuration:

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

Self-hosted Installation

To enable the TinyMCE PowerPaste plugin:

  1. If you are currently using the paste plugin provided with TinyMCE, disable it by removing it from the plugins list.
  2. Add powerpaste to the plugins list in your TinyMCE configuration.

See the example TinyMCE configuration above.

Configuration Options

paste_as_text

This option controls the default state of the Paste as text menu item, which is added by the powerpaste plugin under the Edit menu drop-down.

The supported values are true and false. The default is false.

Example: paste_as_text

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'powerpaste',
  menubar: 'edit',
  toolbar: 'pastetext',
  paste_as_text: true
});

paste_merge_formats

This option enables the merge format feature of the PowerPaste plugin. This merges identical text format elements to reduce the number of HTML elements produced. For example: <b>abc <b>bold</b> 123</b> becomes <b>abc bold 123</b> since the inner format is redundant. This option is enabled by default but can be disabled if retaining nested or identical format elements is important.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using paste_merge_formats

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

paste_tab_spaces

Note: This feature is only available for TinyMCE 5.4 and later.

This option controls how many spaces are used to represent a tab character in HTML when pasting plain text content. By default, the PowerPaste plugin will convert each tab character into 4 sequential space characters.

Type: Number

Default Value: 4

Example: Using paste_tab_spaces

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

powerpaste_word_import

This option controls how content pasted from Microsoft Word is filtered.

Type: String

Default value: prompt

The supported values are:

  • clean - Preserve the structure of the content such as headings, tables and lists but remove inline styles and classes. This results in simple content that uses the site’s CSS stylesheet while retaining the semantic structure from the original document.
  • merge - Preserve the inline formatting and structure of the original document. Invalid and proprietary styles, tags and attributes are still removed ensuring that the HTML is valid while more closely matching the original document formatting.
  • prompt - Prompt the user to choose between the clean and merge options after attempting to paste Microsoft Word content.

Note: When using the Windows operating system, copying and pasting content from Microsoft Word 2013 (or later) in “Protected View” will result in plain, unformatted text. This is due to how Protected View interacts with the clipboard.

powerpaste_googledocs_import

Note: This feature is only available for TinyMCE 5.8 and later.

This option controls how content pasted from Google Docs is filtered.

Type: String

Default value: prompt

The supported values are:

  • clean - Preserve the structure of the content such as headings, tables and lists but remove inline styles and classes. This results in simple content that uses the site’s CSS stylesheet while retaining the semantic structure from the original document.
  • merge - Preserve the inline formatting and structure of the original document. Invalid and proprietary styles, tags and attributes are still removed ensuring that the HTML is valid while more closely matching the original document formatting.
  • prompt - Prompt the user to choose between the clean and merge options after attempting to paste Google Docs content.

powerpaste_html_import

This option controls how content pasted from sources other than Microsoft Word and Google Docs are filtered. Note that this includes content copied from TinyMCE itself.

Type: String

Default value: clean

The supported values are:

  • clean - Preserve the structure of the content such as headings, tables, and lists but remove inline styles and classes. This results in simple content that uses the site’s CSS stylesheet while retaining the semantic structure from the original document.
  • merge - Preserve the inline formatting and structure of the original document. Invalid and proprietary styles, tags and attributes are still removed ensuring that the HTML is valid while more closely matching the original document formatting.
  • prompt - Prompt the user to choose between the clean and merge options after attempting to paste HTML content.

powerpaste_allow_local_images

When set to true, Base64 encoded images using a data URI in the copied content will not be removed after pasting.

Default value: true

Possible values: true, false

Note: If you configure PowerPaste to allow local images, you can have TinyMCE automatically upload Base64 encoded images for conversion back to a standard image as described on the image upload documentation.

powerpaste_block_drop

Due to browser limitations, it is not possible to filter content that is dragged and dropped into the editor. When powerpaste_block_drop is set to true the plugin will disable drag and dropping content into the editor. This prevents the unfiltered content from being introduced. Copy and paste is still enabled.

Default value: false

Possible values: true, false

Example: Using powerpaste_block_drop

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

powerpaste_clean_filtered_inline_elements

This setting allows for configuration of PowerPaste’s “clean” paste filters for inline elements. These filters are run when powerpaste_word_import or powerpaste_html_import are set to "clean"; or when a user clicks the “Remove formatting” button on the paste prompt dialog.

The list of inline elements that should be removed on paste can be specified by setting powerpaste_clean_filtered_inline_elements to a comma-separated string of inline element tag names.

Possible values: A comma-separated string.

Example: powerpaste_clean_filtered_inline_elements

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'powerpaste',
  powerpaste_word_import: 'clean', // optional
  powerpaste_html_import: 'clean', // optional
  powerpaste_clean_filtered_inline_elements: 'strong, em, b, i, u, strike, sup, sub, font'
});

powerpaste_keep_unsupported_src

Due to browser limitations, PowerPaste is not able to support all image types supported by Microsoft Word and Microsoft Excel. When powerpaste_keep_unsupported_src is set to true, PowerPaste will store the original src of unsupported images in a data-image-src attribute on the pasted image element. This enables developers to add further image support via post-processing.

For example, browsers do not allow PowerPaste to access the file system. If your application has access to the file system, setting powerpaste_keep_unsupported_src to true may allow you to replace unsupported images during post-processing using the original file paths.

Default value: false

Possible values: true, false

Example: powerpaste_keep_unsupported_src

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

smart_paste

The smart_paste function will:

  • Detect text that resembles a URL and change the text to a hyperlink.
  • Detect text that resembles the URL for an image and will try to replace the text with the image.

To disable the smart_paste functionality, set smart_paste to false. To configure which image file types are recognised, see Image & file options - images_file_types.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using smart_paste

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'powerpaste',
  menubar: 'edit',
  toolbar: 'paste',
  smart_paste: false
});

image_file_types

This option configures which image file formats will be recognized and placed in an img element by the smart_paste functionality when content is pasted into the editor.

Type: String

Default Value: 'jpeg,jpg,jpe,jfi,jfif,png,gif,bmp,webp'

Possible Values: A list of valid web image file extensions. For a list of possible values see: MDN Web Docs - Image file type and format guide.

Example: Using image_file_types

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'powerpaste',
  smart_paste: true,  // note: default value for smart_paste is true
  image_file_types: 'jpg,svg,webp'
});

Toolbar buttons

The PowerPaste plugin provides the following toolbar buttons:

Toolbar button identifier Description
pastetext Toggles plain text pasting mode on/off. When in plain text mode, all rich content is converted into plain text.

These toolbar buttons can be added to the editor using:

Menu items

The PowerPaste plugin provides the following menu items:

Menu item identifier Default Menu Location Description
pastetext Edit Toggles paste as plain text on/off. When in plain text mode, all rich content is converted into plain text.

These menu items can be added to the editor using:

Advanced Config Options

Pre-filtering and post-filtering callbacks

Developers can add custom filtering before and after PowerPaste’s filters are run using the pre-filtering and post-filtering callbacks. These can be added as init options or at runtime using event listeners.

Note: These callbacks are also triggered by the core Paste plugin, but when triggered by PowerPaste they are passed more data.

paste_preprocess

This setting allows you to run custom filtering on the content from the clipboard before it is run through PowerPaste’s filters. The callback is passed two arguments: the PowerPaste plugin instance and an object containing event data. This object contains:

  • Standard paste event data.
  • content - A string containing the content to be pasted.
  • mode - A string indicating whether PowerPaste is in clean, merge, or auto mode.
  • source - A string indicating which kind of filtering PowerPaste will run based on the source of the content. This will return html, msoffice, googledocs, image, imagedrop, plaintext, text, or invalid.

Note: The imagedrop source was added in TinyMCE 5.3.

Note: The mode ‘auto’ is used when the content source does not have formatting to “clean” or “merge”. For example, when pasting an image with no text or markup content.

Example TinyMCE configuration:

const yourCustomFilter = function(content) {
  // Implement your custom filtering and return the filtered content
  return content;
};

tinymce.init({
  selector: 'textarea',
  plugins: 'powerpaste',
  paste_preprocess: function (pluginApi, data) {
    console.log(data.content, data.mode, data.source);
    // Apply custom filtering by mutating data.content
    // For example:
    const content = data.content;
    const newContent = yourCustomFilter(content);
    data.content = newContent;
  }
});

paste_postprocess

This setting allows you to run custom filtering on the pasted content after it is run through PowerPaste’s filters. The callback is passed two arguments: the PowerPaste plugin instance and an object containing event data. This object contains:

  • Standard paste event data.
  • node - A DOM node containing the DOM structure of the filtered paste content.
  • mode - A string indicating whether PowerPaste is in clean, merge, or auto mode.
  • source - A string indicating which kind of filtering PowerPaste will run based on the source of the content. This will return html, msoffice, googledocs, image, imagedrop, plaintext, text, or invalid.

Note: The imagedrop source was added in TinyMCE 5.3.

Note: The mode ‘auto’ is used when the content source does not have formatting to “clean” or “merge”. For example, when pasting an image with no text or markup content.

Example TinyMCE configuration:

tinymce.init({
  selector: 'textarea',
  plugins: 'powerpaste',
  paste_postprocess: function (pluginApi, data) {
    console.log(data.node, data.mode, data.source);
    // Apply custom filtering by mutating data.node
    const additionalNode = document.createElement('div');
    additionalNode.innerHTML = '<p>This will go before the pasted content.</p>';
    data.node.insertBefore(additionalNode, data.node.firstElementChild);
  }
});

Event Listeners

Custom paste filtering can also be configured at runtime using event listeners.

  • PastePreProcess is equivalent to paste_preprocess
  • PastePostProcess is equivalent to paste_postprocess

The event listeners are passed the same data objects as their equivalent configuration options. The event listener callbacks can be configured or changed at any time as long as you have a reference to the Editor API.

Example TinyMCE configuration:

const yourCustomFilter = function(content) {
  // Implement your custom filtering and return the filtered content
  return content;
};

tinymce.init({
  selector: 'textarea',
  plugins: 'powerpaste',
  setup: function(editor) {
    editor.on('PastePreProcess', function(data) {
      console.log(data.content, data.mode, data.source);
      // Apply custom filtering by mutating data.content
      const content = data.content;
      const newContent = yourCustomFilter(content);
      data.content = newContent;
    });

    editor.on('PastePostProcess', function(data) {
      console.log(data.node, data.mode, data.source);
      // Apply custom filtering by mutating data.node
      // For example:
      const additionalNode = document.createElement('div');
      additionalNode.innerHTML = '<p>This will go before the pasted content.</p>';
      data.node.insertBefore(additionalNode, data.node.firstElementChild);
    });
  }
});

Commands

The PowerPaste plugin provides the following JavaScript command.

Command Description
mceTogglePlainTextPaste Toggles paste as plain text.

Example

tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');

PowerPaste support (Copy and Paste)

This section details supported use of the Tiny PowerPaste plugin.

Pasting from Microsoft Word

Tiny Technologies, Inc. tests and supports using the PowerPaste plugin for copying content from versions of Microsoft Word and Microsoft Excel:

Pasting from Google Docs

Tiny Technologies, Inc. tests and supports using the PowerPaste plugin for copying content from Google Docs for:

  • Copying content from the latest version of Google Docs.
  • Pasting into any supported version of TinyMCE using PowerPaste 5.5.0 or later.

The following may work, but is not officially supported:

  • Pasting Google Docs content into TinyMCE on Microsoft Internet Explorer 11.
  • Copying content from other Google suite applications such as Google Sheets into TinyMCE.

PowerPaste Feature and Browser Support

PowerPaste (Copy and Paste) is supported on all the browsers supported by TinyMCE Enterprise. There are some variances of functionality for different browsers.

  HTML Cleaning Improved HTML Cleaning Image Import
Internet Explorer 11
Microsoft Edge Latest
Chrome Latest
Firefox Latest
Safari Latest

HTML Cleaning

On all browsers, PowerPaste provides basic HTML cleaning. For browsers where HTML5 support is not available, PowerPaste uses the browser DOM to import and clean HTML. This mechanism is the primary cleaning method on browsers where HTML5 clipboard APIs are not available. While the resulting content is clean HTML the direct conversion to a browser DOM can result in some loss of content structure and/or formatting information.

Improved HTML Cleaning

On browsers that support HTML5 APIs, PowerPaste is able to use improved HTML cleaning techniques. Improved HTML cleaning uses the HTML5 clipboard APIs to access the clipboard directly. The original document structure and formatting (when importing formatting) is more likely to be preserved. Where available this approach gives the highest fidelity copy and paste from supported applications to HTML.

Image Import

On browsers that support HTML5, PowerPaste is able to import images embedded in the content (e.g. from Microsoft Word) into the editor. These images can then be uploaded via a HTTP post as required.

Common questions and troubleshooting PowerPaste behavior

What happens when copy and pasting from Microsoft Word?

When content is copied from an application (such as Microsoft Word), the application places a HTML representation of the copied content onto the computer’s clipboard. PowerPaste uses the HTML from the clipboard and cannot access the file directly.

Note: Web browsers and the applications running in them cannot directly access files on the device for security reasons.

Microsoft Word or Microsoft Excel can create content that does not have an equivalent in HTML. The HTML provided to the clipboard by the application is the application’s “best effort” at representing the content as HTML. Depending on the complexity of the source document, the content pasted into TinyMCE using PowerPaste may not be an exact representation of what the content looked like in the original application.

Why are some images or elements from Microsoft Word not appearing?

Some “images” in Microsoft Word cannot be represented as image files in a HTML document, such as: charts, drawings, and “Word Art”. PowerPaste may not be able to paste these items into the TinyMCE editor, because they were not represented as HTML-compatible images on the clipboard. Microsoft Word also allows some formats on images that cannot be represented in HTML, such as wrap and inline.

Microsoft Word can also create content that cannot be accurately recreated in HTML, such as columns, page headers and page footers. Some of these elements may not be copied to the clipboard by Microsoft Word, such as page headers and footers.

How can I see what is on the clipboard?

To view the HTML of content pasted from the clipboard:

Why would Microsoft Internet Explorer 11 show different results from every other supported browser?

Microsoft Internet Explorer interacts with Microsoft Word content differently than all other browsers. When pasting, Microsoft Internet Explorer transforms and cleans up Microsoft Word content before pasting it into TinyMCE. Therefore, Microsoft Internet Explorer provides different clipboard data to web applications when compared to other browsers. This behavior only occurs when Microsoft content is pasted into Microsoft Internet Explorer and cannot be disabled.

Why do images not paste when copied with text content in Microsoft Internet Explorer 11?

This issue relates to changes to Microsoft Internet Explorer 11 late in the product’s life. Tiny (and companies that offer similar products) have reached out to Microsoft to suggest that this change is a defect despite their initial reply that it was intentional and “expected behavior” in Microsoft Internet Explorer 11. Microsoft has made no public statement about addressing the issue specifically, and is no longer making non-security changes to Microsoft Internet Explorer 11. The only recommended workarounds are:

  • Paste the images into TinyMCE individually.
  • Use a different browser.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.