Image tray

Show a strip of thumbnails under the editor for posts with many photos: jump to a photo, change the order, bring back one you removed. The same information lets you clean up unused uploads on your server.

createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageTray: true,
  height: 300,
  // demo: returns a sample photo address instead of your file
  uploadImage: async (file) => 'https://picsum.photos/seed/' + Date.now() + '/640/420',
});

The tray (imageTray)

With imageTray: true, thumbnails of the post's photos sit under the editor, above the status bar, in order. The strip hides when there are no photos.

• Click a thumbnail to scroll to that photo and select it.
• Drag a thumbnail to another spot to reorder the photos in the post. A photo with a caption or a link moves with its box.
• ✕ deletes the photo from the post.
• Photos uploaded in this session and then removed stay greyed out with a +; click to put one back at the caret.

Cleaning up uploads

Deleting or replacing an uploaded photo leaves the file on your server. Clean up when saving with:

• editor.getImages(): addresses of the photos now in the post, without duplicates. Photos still uploading and blob:/data: addresses are left out.
• editor.getUnusedUploads(): addresses uploaded through uploadImage/uploadUrl while this editor was open that are no longer in the post.

form.addEventListener('submit', async () => {
  const unused = editor.getUnusedUploads();
  if (unused.length) {
    await fetch('/upload/cleanup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ urls: unused }),
    });
  }
});

The image:remove event fires with { src } whenever a photo leaves the post (delete, cut, replace). Undo can bring it back, so delete server files at save time with getUnusedUploads(), not on this event.

editor.on('image:remove', ({ src }) => console.log('removed', src));

Options