Éditeur riche

L'éditeur riche WYSIWYG permet la saisie et la mise en forme de contenu textuel directement dans le navigateur. Il fournit une barre d'outils complète pour le formatage, l'insertion de médias, de tableaux, de blocs de code et plus encore.

Structure complète

<div class="bj-rich-editor">
  <div class="bj-rich-editor__toolbar" role="toolbar" aria-label="Éditeur">
    <!-- Titres -->
    <div class="bj-rich-editor__toolbar-group">
      <select class="bj-rich-editor__toolbar-select" aria-label="Style de bloc">
        <option value="p">Paragraphe</option>
        <option value="h1">Titre 1</option>
        <option value="h2">Titre 2</option>
        <option value="h3">Titre 3</option>
      </select>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Formatage -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Gras"><i class="ri-bold"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Italique"><i class="ri-italic"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Souligné"><i class="ri-underline"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Barré"><i class="ri-strikethrough"></i></button>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Listes -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Liste à puces"><i class="ri-list-unordered"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Liste numérotée"><i class="ri-list-ordered"></i></button>
    </div>
    <!-- Retrait -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Retrait +"><i class="ri-indent-increase"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Retrait -"><i class="ri-indent-decrease"></i></button>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Alignement -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Gauche"><i class="ri-align-left"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Centre"><i class="ri-align-center"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Droite"><i class="ri-align-right"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Justifié"><i class="ri-align-justify"></i></button>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Insertion -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Lien"><i class="ri-link"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Supprimer le lien"><i class="ri-link-unlink"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Image"><i class="ri-image-line"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Vidéo"><i class="ri-video-line"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Tableau"><i class="ri-table-line"></i></button>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Blocs -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Citation"><i class="ri-double-quotes-l"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Code"><i class="ri-code-line"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Ligne"><i class="ri-separator"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Effacer"><i class="ri-format-clear"></i></button>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Couleurs -->
    <div class="bj-rich-editor__toolbar-group">
      <div class="bj-rich-editor__color-picker">
        <button class="bj-rich-editor__toolbar-btn" aria-label="Couleur du texte"><i class="ri-font-color"></i></button>
        <input type="color" value="#000000" aria-label="Couleur du texte">
      </div>
      <div class="bj-rich-editor__color-picker">
        <button class="bj-rich-editor__toolbar-btn" aria-label="Couleur de fond"><i class="ri-paint-fill"></i></button>
        <input type="color" value="#ffff00" aria-label="Couleur de fond">
      </div>
    </div>
    <div class="bj-rich-editor__toolbar-separator"></div>
    <!-- Historique -->
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Annuler"><i class="ri-arrow-go-back-line"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Rétablir"><i class="ri-arrow-go-forward-line"></i></button>
    </div>
  </div>
  <div class="bj-rich-editor__content"
       contenteditable="true"
       role="textbox"
       aria-multiline="true"
       data-placeholder="Saisissez votre texte...">
  </div>
</div>

Placeholder et hauteur

Le composant Vue fixe le texte fantôme via l’attribut data-placeholder sur bj-rich-editor__content (style CSS ::before). La hauteur minimale éditable correspond à la prop height, rendue en min-height inline sur la même zone. Une barre d’outils réduite correspond à la prop toolbar (sous-ensemble de TOOLBAR_ALL).

<div class="bj-rich-editor" style="max-width: 40rem">
  <div class="bj-rich-editor__toolbar" role="toolbar" aria-label="Éditeur">
    <div class="bj-rich-editor__toolbar-group">
      <button type="button" class="bj-rich-editor__toolbar-btn" aria-label="Gras"><i class="ri-bold" aria-hidden="true"></i></button>
      <button type="button" class="bj-rich-editor__toolbar-btn" aria-label="Italique"><i class="ri-italic" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="bj-rich-editor__content"
       contenteditable="true"
       role="textbox"
       aria-multiline="true"
       data-placeholder="Saisissez votre message…"
       style="min-height: 12rem">
  </div>
</div>

En HTML/CSS, reproduisez seulement les groupes nécessaires ; chaque bouton reste un bj-rich-editor__toolbar-btn dans un bj-rich-editor__toolbar-group.

<!-- Bouton normal -->
<button class="bj-rich-editor__toolbar-btn" aria-label="Gras">
  <i class="ri-bold"></i>
</button>

<!-- Bouton actif -->
<button class="bj-rich-editor__toolbar-btn bj-rich-editor__toolbar-btn--active" aria-label="Gras">
  <i class="ri-bold"></i>
</button>

<!-- Sélecteur de couleur -->
<div class="bj-rich-editor__color-picker">
  <button class="bj-rich-editor__toolbar-btn" aria-label="Couleur du texte">
    <i class="ri-font-color"></i>
  </button>
  <input type="color" value="#000000" aria-label="Choisir la couleur">
</div>

État désactivé

Contenu en lecture seule

<div class="bj-rich-editor bj-rich-editor--disabled">
  <div class="bj-rich-editor__toolbar" role="toolbar" aria-label="Éditeur">
    <div class="bj-rich-editor__toolbar-group">
      <button class="bj-rich-editor__toolbar-btn" aria-label="Gras"><i class="ri-bold"></i></button>
      <button class="bj-rich-editor__toolbar-btn" aria-label="Italique"><i class="ri-italic"></i></button>
    </div>
  </div>
  <div class="bj-rich-editor__content"
       contenteditable="false"
       role="textbox"
       aria-multiline="true">
    Contenu en lecture seule
  </div>
</div>

Contenu pré-rempli

Titre d'exemple

Un paragraphe avec du texte gras et italique.

Premier élément
Deuxième élément

Une citation importante.

<div class="bj-rich-editor">
  <div class="bj-rich-editor__toolbar" role="toolbar" aria-label="Éditeur">
    ...
  </div>
  <div class="bj-rich-editor__content"
       contenteditable="true"
       role="textbox"
       aria-multiline="true">
    <h2>Titre d'exemple</h2>
    <p>Un paragraphe avec du texte <strong>gras</strong> et <em>italique</em>.</p>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
    </ul>
    <blockquote>Une citation importante.</blockquote>
  </div>
</div>

Raccourcis clavier

Ctrl/Cmd + B → Gras
Ctrl/Cmd + I → Italique
Ctrl/Cmd + U → Souligné
Ctrl/Cmd + Z → Annuler
Ctrl/Cmd + Shift + Z → Rétablir
Ctrl/Cmd + Y → Rétablir

Classes CSS

Classe	Description
`bj-rich-editor`	Conteneur principal de l'éditeur.
`bj-rich-editor--disabled`	État désactivé (opacité réduite, interactions bloquées).
`bj-rich-editor__toolbar`	Barre d'outils contenant les boutons de formatage.
`bj-rich-editor__toolbar-group`	Groupe de boutons dans la toolbar.
`bj-rich-editor__toolbar-btn`	Bouton individuel de la toolbar.
`bj-rich-editor__toolbar-btn--active`	État actif d'un bouton de toolbar.
`bj-rich-editor__toolbar-separator`	Séparateur vertical entre groupes.
`bj-rich-editor__toolbar-select`	Menu déroulant dans la toolbar (ex: titres).
`bj-rich-editor__content`	Zone de contenu éditable.
`data-placeholder (content)`	Attribut <code>data-placeholder</code> sur la zone éditable (texte vide).
`min-height / height`	Hauteur : <code>min-height</code> inline (équivalent prop <code>height</code> Vue).
`bj-rich-editor__color-picker`	Conteneur du sélecteur de couleur.