Image editor

Crop and rotate a photo that is already in the post, in place. Handy for a phone photo lying on its side or an edge you don't want, without another program.

createEditor('#editor', {
  toolbar: 'image | undo redo',
  height: 380,
  uploadImage: async (file) => URL.createObjectURL(file),
});

Opening it

Use the Edit image button on the image bar; there is no toolbar item for it. From code, run editor.exec('imageEdit') while a photo is selected.

Tools

• Crop: drag the box to move it, drag a corner to resize it.
• Ratio: free, 1:1, 4:3, 3:4, 16:9. Picking one fits the largest box of that ratio inside the current one.
• Rotate left / right: 90 degrees at a time; the crop box resets.
• Flip horizontally
• Reset: undoes rotation, flip and crop without closing the dialog.

The real pixel size of the result shows bottom right. Turning a phone sideways or resizing the window re-fits the preview.

Applying

Apply turns the result into a new file, uploads it like a new photo and swaps the address. So uploadImage/uploadUrl, imageResize and imageMaxSize all apply. JPEG, PNG and WebP keep their format, anything else becomes PNG, and the file name gets -edit.

After a crop or a 90° turn a pixel width is cleared; a % width stays. Placement, caption, link and alt text are kept. Undo (Ctrl+Z) brings the old photo back.

Options