CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideDrag 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.

A screencast of drag and drop of text and blocks in CKEditor 5.

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

  • avatarHuckleberry Finn
  • avatarD'Artagnan
  • avatarLittle Red Riding Hood
  • avatarAlice
  • avatarPhileas Fogg
  • avatarWinnetou
  • avatarEdmond Dantès
  • avatarRobinson 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.

  • 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.