Images & uploads

Upload images, videos and Word documents to your own storage.

Echo Editor never uploads anything by itself — you provide the upload function, so files go wherever you want (S3, Cloudinary, your API …).

Images

import { Image, ImageUpload } from 'vue-echo-editor'

const extensions = [
  BaseKit,
  Image,
  ImageUpload.configure({
    // Return the public URL of the uploaded file
    upload: async (file: File) => {
      const body = new FormData()
      body.append('file', file)
      const res = await fetch('/api/upload', { method: 'POST', body })
      const { url } = await res.json()
      return url
    },
    acceptMimes: ['image/png', 'image/jpeg', 'image/webp', 'image/gif'],
    maxSize: 5 * 1024 * 1024, // bytes
  }),
]

Image renders resizable images with an image bubble menu (flip, size presets, alignment, remove). Images can also be pasted or dropped into the editor.

Videos

import { Video, VideoUpload } from 'vue-echo-editor'

VideoUpload.configure({
  upload: async (files: File[]) => {
    const urls = await Promise.all(files.map(uploadToStorage))
    return urls.map((src, i) => ({ src, alt: files[i].name }))
  },
})

Word documents

ImportWord imports .docx files. Provide a convert function (for example calling a server that uses mammoth) and an optional upload for embedded images:

import { ImportWord } from 'vue-echo-editor'

ImportWord.configure({
  convert: async (file: File) => {
    const body = new FormData()
    body.append('file', file)
    return (await fetch('/api/docx-to-html', { method: 'POST', body })).text()
  },
  limit: 10 * 1024 * 1024,
})

Embeds

Iframe embeds services such as YouTube, Bilibili, Figma, CodePen and more from a pasted link.

Export
Export documents to PDF, Markdown, HTML, RTF, plain text and JSON.
AI assistant
Stream completions from any model into the inline AI menu.