Moving blocks

Hover to the left of a paragraph, heading, list, table or image and a grip appears. Drag it and drop the block somewhere else. From the keyboard, use Alt+Shift+↑/↓. Faster than cut and paste, and the formatting stays.

createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | table',
  height: 320,
});

Dragging

• What moves is a top-level block. Lists, tables, quotes and callouts move whole.
• A line shows where the block will land. In an editor with a fixed height, dragging to the top or bottom edge scrolls.
• The grip only appears with two or more blocks, and hides once you start typing.
• No grip on touch screens, in read-only mode or in the HTML source view.

Keyboard

• Alt+Shift+↑ / ↓ swaps the block at the caret with the one above or below. The caret stays inside it.
• With an image selected, the block holding it moves.
• Maps, link cards, attachments and HTML blocks show Move up / Move down buttons in their bar when selected; on touch screens use those.
• Each move is one undo step.

From code

// move a top-level block before another one (null: to the end)
const blocks = editor.content.children;
editor.moveBlock(blocks[2], blocks[0]);
editor.moveBlock(blocks[0], null);

// move the block at the caret one step
editor.exec('moveBlockUp');
editor.exec('moveBlockDown');

Options