Drag and drop
The drag and drop feature brings support for dragging and dropping textual content as well as block objects (like images or tables) within the rich-text editor. It also allows for dropping HTML and plain text content from outside of the editor into CKEditor 5.
This feature is implemented by the DragDrop
plugin which is a part of the Clipboard
feature.
See the screencast below for what you can expect from drag and drop support of text and blocks in CKEditor 5. Use the demo EDITOR to play with dragging content from outside the editor into a document.
This feature is enabled by default in all predefined builds.
# Demo
The sample below allows you to drag contacts from the list to the editor below. They are inserted into the editor as custom widgets representing the h-card microformat.
List of contacts
Huckleberry Finn
D'Artagnan
Little Red Riding Hood
Alice
Phileas Fogg
Winnetou
Edmond Dantès
Robinson Crusoe
Photos: Wikipedia.org.
This demo only presents a limited set of features. Visit the full-featured editor example to see more in action.
The source code of the above snippet is available here: drag-drop.js
, drag-drop.html
.
# Related features
- CKEditor 5 supports dropping images from the file system thanks to the image upload feature.
# Installation
This feature is required by the clipboard plugin and is enabled by default in all predefined builds. These 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-clipboard
package:
npm install --save @ckeditor/ckeditor5-clipboard
Then add the Clipboard
plugin to your plugin list:
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Clipboard, Bold, ... ]
} )
.then( ... )
.catch( ... );
The DragDrop
plugin will activate along with the clipboard plugin.
# Known issues
At the moment, the drag and drop feature supports textual content as well as widgets. Bringing support for any types of blocks is tracked in issue #7731. If you would like to see this feature implemented, make sure you add a 👍 to the issue on GitHub.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.