Toolbar layout

How the toolbar behaves when it has more buttons than fit. By default it keeps one row and folds the rest into the ⋯ menu. Which buttons to show is covered in Toolbar.

createEditor('#editor', {
  toolbar: 'full',
  toolbarMode: 'wrap',
  toolbarDensity: 'compact',
  toolbarSticky: true,
});

Overflow: fold or wrap

• toolbarMode: 'more' (default) keeps one row. Groups that don't fit move into the ⋯ menu as a whole, starting from the end; if a single group is still too wide, its last buttons move one by one. It recalculates when the editor's width changes.
• toolbarMode: 'wrap' lets buttons flow onto more rows. Good for wide admin screens where every button should be visible.
• In both modes, buttons after more in the toolbar string always start in the ⋯ menu. The ⋯ button only appears when it has something to show.

createEditor('#editor', {
  // the first part is always visible, everything after more is in ⋯
  toolbar: 'heading | bold underline color | link image | more | findReplace source',
  toolbarMode: 'wrap',
});

Compact toolbar

toolbarDensity: 'compact' tightens the spacing: 26px buttons (32px on phones). Use it for comment boxes or narrow side panels.

Sticky toolbar

toolbarSticky is on by default: the toolbar stays at the top of the screen while you scroll through a long post. If a fixed site header covers it, move it down with CSS.

.e82-toolbar.is-sticky { top: 64px; } /* your header height */

With a numeric height the content scrolls inside the editor, so the toolbar never leaves anyway. Sticking matters for editors that grow with their content (see Editor size).

Phone toolbar

At 640px wide or less, or on touch screens, the toolbar switches to its phone layout.

• Buttons grow to 40px and the toolbar becomes one row you swipe sideways. The ⋯ button stays pinned at the right.
• With no toolbar set, or 'board', the row starts with image, bold, text color, paragraph style, bullet list, center, link and undo; the rest goes into ⋯.
• Your own toolbar strings and the other presets keep their order, shown as one swipeable row.
• Rotating the phone redraws the toolbar.

Keyboard

One Tab reaches the toolbar; inside it ← → Home End move between buttons. See Accessibility.

Options