WYSIWYG éditeur de text enrichi. Partie 2. Tester si c'est en gras

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.

Cette partie explique comment détecter sur la sélection courante est en gras. En réalité cela pourrait fonctionner avec n'importe quelle balise (<i>, <strike>, <span>...) mais nous allons le tester avec la balise <b> car c'est le premier style que nous allons implémenter.

Cette partie est nécessaire pour créer le bouton qui va permettre de mettre le texte en gras afin de savoir si le texte est déjà ou non en gras. À la fin de cette partie, nous aurons un bouton pour la mise en gras (qui ne fonctionnera pas encore qui devrait devenir bleu selon que la sélection courante est en gras ou non.

Création du bouton

Pour commencer, créons le bouton:

<button id="btn-bold"><b>B</b></button>

Ajoutons le CSS permettant au bouton de devenir bleu si la classe active lui est ajoutée :

#btn-bold.active { color:blue; }

JavaScript

C'est la partie un peu technique. Il existe une function queryCommandState() qui vérifie automatiquement si la sélection courante possède un style donné. Mais, nous n'allons pas l'utiliser car cette fonctionnalité est obsolète.

À la place, nous allons écrire notre propre function de détection :

// Check if the current selection
function isSelectionInTag(tag)
{
    // Get the current node
    let currentNode = window.getSelection().focusNode;
    // While the node is not the editor division
    while (currentNode.id !== 'editor')
    {
        // Check if the node is the requested tag
        if (currentNode.tagName === tag) return true;
        // Move up in the tree
        currentNode = currentNode.parentNode;       
    }
    return false;
}

On commence par récupérer le noeud de la sélection courante :

let currentNode = window.getSelection().focusNode;

focusNode est le noeud où la sélection s'est terminée.
baseNode est le noeud où la sélection a démarré.

Vous pouvez utiliser l'un ou l'autre selon le comportement désiré de l'éditeur.

Nous allons ensuite remonter l'arbre jusqu'à ce que

on trouve la balise recherchée (on retourne vrai)
ou l'on atteind la racine de l'éditeur (on retourne faux)

while (currentNode.id !== 'editor')
{
    // Check if the node is the requested tag
    if (currentNode.tagName === tag) return true;
    // Move up in the tree
    currentNode = currentNode.parentNode;       
}
return false;

Lorsque la sélection est modifiée, nous avons juste à vérifier si la sélection est en gras pour mettre à jour la couleur du bouton :

if (isSelectionInTag('B')) btnBold.classList.add('active'); else btnBold.classList.remove('active');

Resultats

Essayez de cliquer ou sélectionner une partie normale et une partie en gras du texte. La bouton devrait devenir bleu ou pas :

Voir aussi

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