Handling Images

The ImagesExtension allows you to add images to your editor through either copy/paste or through drag and drop.

Uploading Images

By default, images will be saved as base64 strings in the editor's JSON content. You can customize this to upload images to your backend instead.

Pass an upload function to the ImagesExtension that will send the base64 string to your backend and return the URL of the uploaded image.

async function uploadImage(base64: string) {
  const response = await $fetch('/api/upload', {
    method: 'POST',
    body: JSON.stringify({ base64 }),
  })
  return response.url
}

const editor = useEditor({
  extensions: [
    ...EditorExtensions({
      images: { uploadFn: uploadImage },
    }),
  ],
})

Loading Styles

While an image is uploading, you can add an imageLoadingClass to add visual feedback.

const editor = useEditor({
  extensions: [
    ...EditorExtensions({ 
      images: { 
        uploadFn: uploadImage,
        imageLoadingClass: 'opacity-30 animate-pulse' 
      } 
    }),
  ],
})

NuxtHub Example

Configuration