Skip to content

Latest commit

 

History

History
93 lines (58 loc) · 4.79 KB

drag-drop.md

File metadata and controls

93 lines (58 loc) · 4.79 KB
Raw
menu-title meta-title meta-description category
Drag and drop
Drag and drop | CKEditor 5 Documentation
Learn all about using the drag and drop mechanism to manage content and uploads in CKEditor 5
features

{@snippet features/build-drag-drop-source}

Drag and drop

The drag and drop feature lets you drag and drop both text and content blocks such as paragraphs, tables, or lists inside the editor. This allows you to select an entire block or multiple blocks, and move them before or after other blocks. You can also drag and drop HTML and plain text content from outside the editor and use it to upload images.

Demo

The demo below lets you drag contacts from the list to the editor. The contacts are inserted into the editor as custom widgets representing the h-card microformat. You can also select and drag around existing content inside the editor.

{@snippet features/drag-drop}

Photos: Wikipedia.org.

This demo presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action.

The source code of the above snippet is available here: drag-drop.js, drag-drop.html. You can find the configuration of the editor used in the demo here: build-drag-drop-source.js. The code for the custom plugin responsible for handling the h-cards is available here: hcard.js.

File upload via drag and drop

When the {@link features/ckbox CKBox file manager} is enabled in your CKEditor 5 integration, you can upload files and images using the drag and drop mechanism. You can test this solution in the {@link features/ckbox#demo CKBox demo}.

Drag and drop of content blocks

The drag and drop plugin fully supports dragging content blocks such as paragraphs, tables, or lists inside the editor by default. This allows you to select an entire block or multiple blocks, and move them before or after other blocks.

The drag and drop functions include:

  • Selection of the text, elements, multiple blocks, and moving these around.
  • Placement of blocks inside other blocks such as tables, blockquotes, etc.
  • The braille dots panel icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} in the balloon block editor now behaves as a drag handle.

Classic editor demo

Select a block or blocks, and drag them across the document. You can place blocks inside other blocks, such as tables and blockquotes.

{@snippet features/block-drag-drop}

Balloon block editor demo

In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the braille dots panel icon {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator}.

{@snippet features/block-balloon-drag-drop}

Installation

⚠️ **New import paths** 
Starting with {@link updating/update-to-42 version 42.0.0}, we changed the format of import paths. This guide uses the new, shorter format. Refer to the {@link getting-started/legacy-getting-started/legacy-imports Packages in the legacy setup} guide if you use an older version of CKEditor 5.

After {@link getting-started/quick-start installing the editor}, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, Clipboard } from 'ckeditor5';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ Clipboard, Bold, /* ... */ ],
	})
	.then( /* ... */ )
	.catch( /* ... */ );

The {@link module:clipboard/dragdrop~DragDrop DragDrop} plugin will activate along with the clipboard plugin.

Styling the drag and drop

The drag and drop target line color is managed by the CSS variable (--ck-clipboard-drop-target-color). You can use the following snippet to change the color of the line:

:root {
	--ck-clipboard-drop-target-color: green;
}

Related features

  • CKEditor 5 supports dropping images from the file system thanks to the {@link features/image-upload image upload} feature.

Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-clipboard.