Images et médias

Ajouter une image

Une image peut être insérée depuis la barre d’outils, le menu / ou un collage. Si votre application doit envoyer le fichier vers un serveur, fournissez simplement une fonction uploadImage.

<script setup lang="ts">
import type { NfzEditorImageUpload } from '@vevedh/nfz-notion-markdown-editor/types'

const markdown = ref('')

const uploadImage: NfzEditorImageUpload = async (payload) => {
  const blob = await (await fetch(payload.dataUrl)).blob()
  const body = new FormData()
  body.append('file', new File([blob], payload.fileName, { type: payload.mimeType }))

  const result = await $fetch<{ url: string }>('/api/media', {
    method: 'POST',
    body
  })

  return { url: result.url }
}
</script>

<template>
  <NfzNotionMarkdownEditor v-model="markdown" :upload-image="uploadImage" />
</template>

L’éditeur ne connaît ni vos identifiants de stockage ni vos secrets. Il reçoit uniquement l’URL finale à insérer dans le document.

Stocker les fichiers sur un service S3-compatible

Votre backend peut utiliser n’importe quel stockage objet compatible S3. Pour un hébergement autonome, l’exemple fourni dans le projet utilise RustFS. La configuration applicative reste générique avec des variables S3_*, ce qui évite de lier l’éditeur à un fournisseur particulier.

Gardez toujours les clés S3 côté serveur. Vérifiez aussi le type MIME, la taille réelle du fichier et générez vous-même le nom de l’objet avant l’envoi vers le stockage.

Ajouter une légende

Cliquez sur une image pour afficher ses outils, puis saisissez la légende sous le visuel. Elle est conservée avec le document lors des allers-retours Markdown.

Vous pouvez désactiver cette fonction avec enableImageCaption.

Vidéos et iframes

Les URL dangereuses sont refusées. Pour autoriser une iframe personnalisée, utilisez une URL HTTPS et ajoutez explicitement son nom d’hôte dans allowedIframeHosts.