Docs › Images and media
Images
Insert photos, resize by the corners, align, alt text, captions and links.
Put photos in a post, then click one to change its size, placement and caption. Almost every board or blog post with pictures needs this.
Try it
Click a photo. Drag a corner to resize it; the bar above it changes placement, caption and link.
This photo uses "wrap text, left", so the text flows on its right. Click it and try center or in line with text.
Code for this demo
createEditor('#editor', {
toolbar: 'image | alignLeft alignCenter alignRight | undo redo',
height: 400,
uploadImage: async (file) => URL.createObjectURL(file),
});Adding photos
- The Image button (
image): click the drop area or drop files on it; several at once is fine. Or type an address and alt text in the fields below it. - Drop image files on the content, or paste a screenshot or copied picture with Ctrl+V.
- Type / on an empty line and look for "image" (slash menu).
Whichever way, a preview shows at once and is swapped for the server address when the upload ends. Without upload settings the photo goes in as base64, so set up image upload on a real site. Shrinking and HEIC conversion are in Resize and convert.
Resizing
A clicked photo gets four corner handles and a size label (width × height). Dragging a handle changes the width and keeps the ratio, from 24px up to the content width. Touch works too.
On the bar, 25% 50% 75% 100% set the width relative to the content, and 1:1 goes back to the original size.
The image bar
| Button | What it does |
|---|---|
| In line / wrap left / center / wrap right | In line keeps it inside the line of text. Wrap uses float so text flows around it. Center sets auto side margins. |
| 25% … 100%, 1:1 | Width as a share of the content, or the original size. |
| Alternative text | Sets alt, read by screen readers and shown when the photo can't load. |
| Add caption | Wraps the photo in <figure> with a <figcaption>. Click again to remove it. |
| Edit image | Crop, rotate, flip (Image editor). |
| Link image | Wraps the photo in <a>, with new tab and nofollow options. Ctrl+K does the same. |
| Replace image | Uploads another photo in the same place and layout. |
| Delete image | Removes it; so do Backspace and Delete while it is selected. |
With a photo selected, the alignLeft alignCenter alignRight buttons and Ctrl+Shift+L/E/R act on the photo; left means "in line".
Where it is
image is on the first row of the basic, board and full presets (not minimal). On phones it is first in the one-row toolbar.
Saved HTML
<figure style="margin: 0 0 1em; display: table; margin-left: auto; margin-right: auto; text-align: center">
<img src="/files/a.jpg" alt="A forest path" style="width: 360px; height: auto; max-width: 100%" width="640" height="400">
<figcaption style="font-size: 0.875em; color: #667085; margin-top: 6px">Caption</figcaption>
</figure>
<p><img src="/files/b.jpg" alt="" style="float: left; margin: 0 16px 8px 0; width: 160px; height: auto; max-width: 100%" width="320" height="240" loading="lazy">Text…</p>Placement and size are inline styles, so the view page looks the same without the editor CSS. responsiveOutput (on by default) adds max-width: 100% and the natural width/height; lazyImages (on by default) adds loading="lazy" from the second photo on. See Saved HTML.
Options
| Name | Type | Default | Description |
|---|---|---|---|
image | toolbar item | Opens the image dialog. | |
uploadImage | (file, { onProgress }) => Promise<string> | Uploads a photo and resolves to its address. Image upload | |
uploadUrl | string | POST here instead of using a function. | |
imageAccept | string | 'image/*,.heic,.heif' | File types that can be chosen. |
imageMaxSize | number (bytes) | none | Largest photo. |
responsiveOutput | boolean | true | Adds max-width: 100% and natural sizes when saving. |
lazyImages | boolean | true | loading="lazy" from the second photo on. |