BjRichEditor

Composant Vue WYSIWYG pour la saisie de contenu riche. Basé sur contenteditable, sans dépendance externe. Supporte v-model, toolbar configurable et raccourcis clavier (Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z, Ctrl+Y).

Utilisation

<script setup>
import { ref } from 'vue'
import { BjRichEditor } from '@flrxnt/dsbj/vue'

const content = ref('<p>Contenu initial</p>')
</script>

<template>
  <BjRichEditor v-model="content" placeholder="Saisissez votre texte..." />
</template>

v-model et contenu HTML

Le contenu éditable déclenche update:modelValue avec le HTML interne (sanitisé côté lecture de la prop).

<script setup lang="ts">
import { ref, watch } from 'vue'
import { BjRichEditor } from '@flrxnt/dsbj/vue'

const html = ref('<p>Départ</p>')
watch(html, (v) => console.log('update:modelValue', v))
</script>

<template>
  <BjRichEditor v-model="html" placeholder="Éditez ici…" />
</template>

Aperçu interactif (toolbar complète)

<BjRichEditor
  v-model="content"
  :toolbar="['heading', 'bold', 'italic', 'underline', 'unorderedList', 'orderedList', 'link']"
  placeholder="Éditeur simplifié..."
/>

État désactivé

<BjRichEditor
  model-value="<p>Ce contenu est en lecture seule.</p>"
  :disabled="true"
/>

Contenu pré-rempli

<script setup>
import { ref } from 'vue'
import { BjRichEditor } from '@flrxnt/dsbj/vue'

const content = ref(`
  <h2>Mon article</h2>
  <p>Un paragraphe avec du <strong>gras</strong> et de l'<em>italique</em>.</p>
  <ul>
    <li>Premier point</li>
    <li>Deuxième point</li>
  </ul>
  <blockquote>Une citation remarquable.</blockquote>
  <pre><code>console.log('Hello DSBJ')</code></pre>
`)
</script>

<template>
  <BjRichEditor v-model="content" />
</template>

Hauteur personnalisée

<BjRichEditor
  v-model="content"
  height="24rem"
  placeholder="Éditeur plus haut..."
/>

// Tous les outils disponibles :
const TOOLBAR_ALL = [
  'heading',        // Sélecteur H1/H2/H3/P
  'bold',           // Gras (Ctrl+B)
  'italic',         // Italique (Ctrl+I)
  'underline',      // Souligné (Ctrl+U)
  'strikethrough',  // Barré
  'unorderedList',  // Liste à puces
  'orderedList',    // Liste numérotée
  'indent',         // Augmenter le retrait
  'outdent',        // Réduire le retrait
  'alignLeft',      // Aligner à gauche
  'alignCenter',    // Centrer
  'alignRight',     // Aligner à droite
  'alignJustify',   // Justifier
  'link',           // Insérer un lien
  'unlink',         // Supprimer le lien
  'image',          // Insérer une image (URL)
  'video',          // Insérer une vidéo (embed)
  'table',          // Insérer un tableau
  'blockquote',     // Citation
  'codeBlock',      // Bloc de code
  'removeFormat',   // Effacer le formatage
  'textColor',      // Couleur du texte
  'bgColor',        // Couleur de fond
  'horizontalRule', // Ligne horizontale
  'undo',           // Annuler (Ctrl+Z)
  'redo',           // Rétablir (Ctrl+Y)
]

Props

Prop	Description
`modelValue`	Contenu HTML (v-model) ; le composant émet update:modelValue à chaque modification.
`placeholder`	Texte indicatif quand l'éditeur est vide.
`disabled`	Désactive l'éditeur.
`toolbar`	Liste des outils à afficher. Par défaut, tous sont affichés.
`height`	Hauteur minimale de la zone éditable (ex: "20rem").