BjRichEditor

Composant React WYSIWYG pour la saisie de contenu riche. Basé sur contenteditable, sans dépendance externe. Raccourcis clavier intégrés (Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z, Ctrl+Y).

Utilisation

import { useState } from 'react'
import { BjRichEditor } from '@flrxnt/dsbj/react'

export default function App() {
  const [content, setContent] = useState('<p>Contenu initial</p>')

  return (
    <BjRichEditor
      value={content}
      onChange={setContent}
      placeholder="Saisissez votre texte..."
    />
  )
}

Aperçu (toolbar complète)

<BjRichEditor
  value={content}
  onChange={setContent}
  toolbar={['heading', 'bold', 'italic', 'underline', 'unorderedList', 'orderedList', 'link']}
  placeholder="Éditeur simplifié..."
/>

État désactivé

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

Contenu pré-rempli

import { useState } from 'react'
import { BjRichEditor } from '@flrxnt/dsbj/react'

export default function Article() {
  const [content, setContent] = useState(`
    <h2>Mon article</h2>
    <p>Texte 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>
  `)

  return <BjRichEditor value={content} onChange={setContent} />
}

// Tous les outils disponibles :
import { TOOLBAR_ALL } from '@flrxnt/dsbj/react'

// 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)
// ]

Combinaisons

toolbar réduite, hauteur fixe, placeholder et valeur initiale ensemble.

Brouillon

import { useState } from 'react'
import { BjRichEditor } from '@flrxnt/dsbj/react'

export default function App() {
  const [html, setHtml] = useState('<p><strong>Brouillon</strong></p>')
  return (
    <BjRichEditor
      className="article-editor"
      value={html}
      onChange={setHtml}
      placeholder="Rédigez ici…"
      height="220px"
      toolbar={['bold', 'italic', 'unorderedList', 'orderedList', 'link', 'removeFormat']}
    />
  )
}

Contenu contrôlé et onChange

value synchronise le HTML ; onChange(html) à chaque saisie ou action toolbar.

import { useState } from 'react'
import { BjRichEditor } from '@flrxnt/dsbj/react'

export default function App() {
  const [body, setBody] = useState('')
  return (
    <BjRichEditor
      value={body}
      onChange={(next) => {
        setBody(next)
        console.log('length', next.length)
      }}
      placeholder="Le HTML est mis à jour à chaque frappe."
    />
  )
}

Props

Prop	Description
`value`	Contenu HTML.
`onChange`	Callback appelé à chaque modification avec le HTML mis à jour.
`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.
`className`	Classe CSS sur le conteneur bj-rich-editor.