Docs › Toolbar and look

Editor size

Height, growing with content, the resize grip, fullscreen and the placeholder.

Set the height of the writing area: fixed, growing with the content, or let the writer drag it taller and switch to fullscreen.

Try it

Code for this demo

createEditor('#editor', {
  toolbar: 'heading | bold color | bulletList | link image | fullscreen',
  height: 'auto',
  minHeight: 120,
  maxHeight: 320,
  placeholder: 'Tell us how we can help',
});

The demo starts empty, so the placeholder shows. Keep typing and it grows to 320px, then scrolls inside. Open fullscreen with the last toolbar button or Ctrl+Shift+F; Esc closes it.

Setting the height

With nothing set, the writing area is at least 300px and grows with the page as you write. The toolbar sticks to the top.
A number such as height: 400 fixes the height; longer content scrolls inside the editor.
height: 'auto' grows with the content only. Use minHeight for the starting size and maxHeight for where it stops growing and starts scrolling.
minHeight and maxHeight work with the other modes too. All numbers are pixels.

// comment box: start small, grow
createEditor('#comment', { toolbar: 'minimal', height: 'auto', minHeight: 80, maxHeight: 240 });

// admin editor: fixed height
createEditor('#editor', { height: 500 });

Resize grip

Drag the grip at the right end of the status bar to change the height (120px at least). resizable: false removes it, and it is not shown with height: 'auto'. It lives in the status bar, so statusbar: false hides it too. It is a mouse feature and does nothing on phones.

Fullscreen

The toolbar item is fullscreen. It is in the ⋯ menu of the board and full presets.
Ctrl+Shift+F (⌘+Shift+F on Mac) toggles it; Esc closes it.
The editor covers the window and the page stops scrolling. Text is centered at up to 860px wide, so it stays readable on big screens.
It also works in read-only mode.

editor.toggleFullscreen();      // toggle
editor.toggleFullscreen(false); // close

editor.on('fullscreen', (open) => {
  document.querySelector('.site-header').hidden = open;
});

Placeholder

Faint text shown while the editor is empty. Without it you get the UI language default ("Start writing…" in English). It is also the accessible name of the writing area (aria-label), so say what the box is for. It is never part of the saved HTML.

Options

Name	Type	Default	Description
`height`	`number \| 'auto'`	-	A number fixes the height (px); `'auto'` grows with the content. Unset: at least 300px, growing with the page
`minHeight`	`number`	`300`	Minimum height (px). No default minimum when `height` is a number or `'auto'`
`maxHeight`	`number`	-	Stops growing here and scrolls inside
`resizable`	`boolean`	`true`	The height grip in the status bar; never with `height: 'auto'`
`placeholder`	`string`	language default	Hint shown while empty; also the area's accessible name
`statusbar`	`boolean`	`true`	The character count bar; hiding it also hides the grip
`fullscreen`	toolbar item	-	Toggle fullscreen (`Ctrl`+`Shift`+`F`)