FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour!

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;
}

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