Dropping and Pasting into Editor Content
Some of these features were introduced in CKEditor 4.5. They are provided through the Clipboard, Paste from Word and Upload Image plugins. Part of them are not included in the CKEditor presets available from the Download site and may need to be added to your custom build with CKBuilder.
One of the CKEditor 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 CKEDITOR.editor.paste event which makes it easy to process it before it is inserted into the editor. This mechanism is used extensively by CKEditor 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.
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 —
'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]';
Paste from Word
HTML exposed by Microsoft Word does not comply to any imaginable rules. It is a poetry of what can be done wrong. Therefore, a separate filter had to be created to normalize this content. It is implemented in the Paste from Word plugin and, beside the standard filtering options described in the previous sections, it has additional settings:
- CKEDITOR.config.pasteFromWordRemoveFontStyles (to be deprecated in favor of Advanced Content Filter)
Note that for CKEditor versions older than 4.6 the following options were available, too:
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:
For more information on pasting, dropping and uploading files with CKEditor refer to the following articles: