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.
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; }
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
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');
Essayez de cliquer ou sélectionner une partie normale et une partie en gras du texte. La bouton devrait devenir bleu ou pas :