WYSIWYG éditeur de text enrichi. Partie 1. Les bases

Le but de cette page est d'expliquer comment créer un éditeur de texte HTML enrichi. L'objectif est d'expliquer étape par étape comment créer cet éditeur. Je vais tenter de n'utiliser que du VanillaJS (pure JavaScript sans framework ou bibliothèques externes).

La première partie explique comment créer et mettre le focus sur l'éditeur. Voici un paerçu du résultat de cette première partie :

Créer l'éditeur

Commençons par créer une division en lui ajoutant l'attribut contenteditable="true" :

<div id="editor" contenteditable="true"><p>Edit here.</p></div>

Le CSS

Ajoutons le CSS suivant pour notre éditeur :

#editor {
    min-height:30vh; 
    max-height:80vh; 
    overflow-y:auto;
    white-space: pre-wrap;
    background-color: #eaeaff;
}

min-height:30vh spécifie que la hauteur minimum de l'éditeur est de 30% de la fenêtre
max-height:80vh spécifie que la hauteur maximum de l'éditeur est de 80% de la fenêtre
overflow-y:auto; autorise la barre de défilement si le contenu est plus grand que l'éditeur
overflow-y:auto; autorise les espaces consécutifs
background-color: #eaeaff; pour mieux voir les limites de l'éditeur

Nous allons aussi retirer les marges des balises <p> car nous allons utilsier ce tag pour séparer les paragraphes :

#editor p { margin: 0; }

JavaScript

Commençons par récupérer le noeud de l'éditeur qui va frequemment nous servir :

let editor = document.getElementById('editor');

Ensuite, forçons le focus sur l'éditeur dès que la page est chargée :

document.addEventListener("DOMContentLoaded", function() {
    editor.focus();
});

Debugging

Ajoutons une nouvelle section qui affichera le contenu HTML de l'éditeur, ce qui nous permettra de mieux comprendre ce qu'il se passe dans l'éditeur :

<pre id="output"></pre>

Chaque fois que le contenu est modifié, les sources HTML seront mises à jour :

let output = document.getElementById('output');

// Update the output when the editor is updated
document.onselectionchange = () => {
    // Check if the editor is focussed
    if (editor === document.activeElement)
    {
        output.textContent = editor.innerHTML;
    }
}

Resultats

Essayez de mettre à jour le contenu de l'éditeur pour voir son contenu HTML actualisé :

Voir aussi

Dernière mise à jour : 23/03/2020