Premier éditeur

Un premier éditeur en quelques lignes

Le composant fonctionne comme un champ Vue classique : le Markdown est lu et mis à jour avec v-model.

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

const markdown = ref(`# Mon document

Tapez / pour ajouter rapidement un bloc.`)

function save(payload: NfzEditorSavePayload): void {
  console.log(payload.markdown)
}
</script>

<template>
  <NfzNotionMarkdownEditor
    v-model="markdown"
    show-save-button
    min-height="520px"
    @save="save"
  />
</template>

Ce qui se passe ici

markdown reste la valeur principale de votre application. Lorsque l’utilisateur écrit, le composant met cette chaîne à jour. Le bouton Enregistrer déclenche l’événement save, que vous pouvez relier à votre API, votre store ou votre service Feathers.

L’éditeur ne décide pas à votre place où le document doit être stocké.

Afficher un document sans le modifier

<NfzNotionMarkdownEditor v-model="markdown" readonly />

Le contenu reste visible, mais les actions de modification sont désactivées.

Garder seulement les commandes utiles

<NfzNotionMarkdownEditor
  v-model="markdown"
  :toolbar="['heading-1', 'bold', 'bullet-list', 'table', 'image', 'save']"
/>

Vous pouvez donc proposer une interface très simple à certains utilisateurs et une barre d’outils plus complète à d’autres. La liste de toutes les commandes est disponible dans l’API de la barre d’outils.