Pasting content from Microsoft Word
The Paste from Word feature is provided through the PasteFromOffice
plugin.
This feature allows you to paste content from Microsoft Word and maintain the original structure and formatting. After creating a document in Microsoft Word you can simply copy it to CKEditor 5 and retain basic text styling, heading levels, links, lists, tables and images.
When the plugin is enabled, it automatically detects Word content and transforms its structure and formatting to clean HTML which is then transformed into semantic content by the editor.
The PasteFromOffice
plugin also allows you to paste content from Google Docs. See the pasting content from Google Docs guide to learn more.
The Paste from Office plugin only preserves content formatting and structures that are included in your CKEditor 5 build. This means that you may need to add missing features such as font color or text alignment to your build. Read more in the Automatic content filtering section below.
This feature is enabled by default in all predefined builds.
# Demo
To test how Paste from Office works, download the sample Word document, open it in Microsoft Word, copy the content, and paste it into CKEditor 5 below.
# Related features
CKEditor 5 supports a wider range of paste features, including:
- Paste from Google Docs – Paste content from Google Docs, maintaining the original formatting and structure.
- Paste plain text – Paste text without formatting that will inherit the style of the content it was pasted into.
# Automatic content filtering
With CKEditor 5 you do not need to worry about pasting messy content from Microsoft Word (or any other possible sources). Thanks to the CKEditor 5 custom data model, only content which is specifically handled by the loaded rich-text editor features will be preserved.
This means that if you did not enable, for instance, font family and font size features, this sort of formatting will be automatically stripped off when you paste content from Microsoft Word and other sources (e.g. other websites).
# Installation
This feature is enabled by default in all official builds. The installation instructions are for developers interested in building their own custom rich-text editor.
To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-paste-from-office
package:
npm install --save @ckeditor/ckeditor5-paste-from-office
Then add the PasteFromOffice
plugin to your plugin list:
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ PasteFromOffice, Bold, ... ]
} )
.then( ... )
.catch( ... );
Read more about installing plugins.
# Support for other applications
At the current stage, the focus of the @ckeditor/ckeditor5-paste-from-office
package is on supporting content that comes from Microsoft Word and Google Docs. However, it does not mean that pasting from other similar applications (such as Microsoft Excel) is not supported.
By default, CKEditor 5 will support pasting rich-text content from these applications, however, some styles and formatting may be lost, depending on the source application. Also, other minor bugs may appear.
You can find more information regarding compatibility with other applications in this ticket.
If you think that support for any of the applications needs improvements, please add 👍 and comments in the following issues:
Feel free to open a new feature request for other similar applications, too!
# Known issues
If the pasted document contains both images and styled text (e.g. headings), it may happen that the images are not pasted properly. Unfortunately, for some operating system, browser and Word versions the image data is not available in the clipboard in this case.
It is advised to try and paste the image separately from the body of the text if this error occurs.
If the image is represented in the Word content by the VML syntax (like this one: <v:shape><v:imagedata src="...."/></v:shape>
), it will not be pasted either as this notation is not supported by CKEditor 5. If you’d like to see this feature implemented, add a 👍 reaction to this GitHub issue.
Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.