Bonjour à tous,
Je suis entrain de développer un éditeur HTML WYSIWYG qui fonctionne bien en ce qui concerne la mise en forme du texte (j'utilise la fonction execCommand() ).
Par contre pour améliorer l'ergonomie de mon éditeur je voudrais faire en sorte que lorsque mon curseur (texte) se trouve dans une zone, par exemple en gras, le bouton associé soit "actif".
Pour mieux comprendre voici l'extrait du script HTML issue de l'éditeur avec un bout de texte en gras :
J'ai essayée la fonction queryCommandValue() mais sans résultat (j'arrive pas bien à comprendre où et comment l'utiliser).
Code : Sélectionner tout - Visualiser dans une fenêtre à part <p>Texte normal Texte normal <b>Texte en GRAS</b> Texte normal</p>
Le seul code JavaScript qui fonctionne même s'il répond qu'a moitié mon problème est celui-ci :
Il répond qu'a moitié a mon problème car il déclenche la fonction qui me permet de changer le style du bouton que si je "click" dessus.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 document.getElementById('editeur').addEventListener('focus', function (e) { // enclenche la recherche des balises <b> contenue dans le message var b_Elts = document.getElementsByTagName('b'); for (var i = 0; i < b_Elts.length; ++i) { b_Elts[i].addEventListener('click', function (e) { // événement qui ajoute une classe actif au bouton associé au GRAS document.getElementById('boldSwitch').classList.add('actif'); }); } });
En gros mon problème c'est que je n'arrive pas a ajouter un évènement de type clavier a ma balise <b>, seul l'évènement click à l'aire de se déclencher.
j'ai essayé "focus", "keypress", "keyup", "keydown" mais rien y fait, l'évènement ne se déclenche pas.
Si vous avez une idée pour résoudre mon problème je vous remercie d'avance.
PS: Inutile de me proposer ceux qui sont déjà fait, qui fonctionne très bien fait et simple d'utilisation, mon but est surtout d'apprendre.
Merci encore
Partager