Dropping and Pasting into Editor Content

One of the CKEditor 4 features is that it takes care over the input data you paste or drop into the editor. The Clipboard plugin which is included in every preset implements custom input content handling, which means that the editor will handle pasted and — since version 4.5 — dropped content.

All pasted and dropped content is passed through the event-paste event which makes it easy to process it before it is inserted into the editor. This mechanism is used extensively by CKEditor 4 features like Advanced Content Filter and paste filter, Paste from Word filter or support for uploading dropped files.

Note that browsers support clipboard operations differently and because of that the behavior of the drag and drop or copy and paste may be slightly different between browsers.

To learn more about the clipboard support check the Clipboard Integration article.

# Filtering Content

The most important feature related to clipboard is being able to limit what data can be pasted and dropped into the editor. Without such filters the user would be able to paste any content copied from the Web or other applications like email clients, Microsoft Word, etc. which could effectively ruin the semantics and looks of the content created with the editor. Additionally, Chrome, Opera and Safari tend to fill the clipboard with HTML including tons of inline styles which not only looks terrible in the editor but could also be uneditable.

Therefore, all pasted and dropped content is filtered by Advanced Content Filter unless it was disabled.

Additionally, since CKEditor 4.5 it is possible to configure a separate filter (called “paste filter”) which will handle only pasted and dropped content. By default it is enabled in Chrome, Opera and Safari to clean up the messy HTML they create. The paste filter is configurable using the allowed content rules and it also has two presets — 'plain-text' and 'semantic-content'. The first of them replaces the CKEDITOR.config.forcePasteAsPlainText option, but thanks to the flexibility of the paste filter it is now also possible to achieve results like “only text with links”:

config.pasteFilter = 'p; a[!href]';

You can also read more about content filtering in general and see the working “Content Filtering” sample.

# File Upload

Another feature related to the clipboard is uploading dropped or pasted files or images. It lets you not only drop or paste files into the document, but also paste a part of the image copied from the image editor. The Upload Widget, File Tools and Notification plugins create a flexible API which lets the developers handle files the way they need. To learn more about these APIs check the Notifications, Clipboard Integration and Uploading Dropped or Pasted Files articles.

Note that this feature is limited because of browsers and operating systems limitations. File API is not supported in Internet Explorer 9 and below so dropped files cannot be handled. Support for pasting whole files and fragments of files (e.g. images) varies between browsers and operating systems.

# Dropping and Pasting Demos

See the following samples for examples of pasting and dropping into editor content:

• The “Uploading Dropped and Pasted Images” sample.
• The “Drag and Drop Integration” sample.
• The “Paste from Word” sample.

# Further Reading

For more information on pasting, dropping and uploading files with CKEditor 4 refer to the following articles:

• Clipboard Integration
• Uploading Dropped or Pasted Files
• Pasting Content from Microsoft Word
• Pasting Content from Google Docs
• Content Filtering (ACF)
• Advanced Content Filter