Discussion :

[La_Buse]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Texte normal Texte normal <b>Texte en GRAS</b> Texte normal</p>

J'ai essayée la fonction queryCommandValue() mais sans résultat (j'arrive pas bien à comprendre où et comment l'utiliser).

Le seul code JavaScript qui fonctionne même s'il répond qu'a moitié mon problème est celui-ci :

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

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.
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

[Kennel sébastien]

C'est le survol de la souris que tu souhaites, non ?

Ce n'est pas l'événement de « click » qu'il faut utiliser mais « mouseover » et « mouseout » ;-)

[La_Buse]

En gros je voudrais réussir a déclencher une fonction sans avoir a utiliser la souris une fois que j'ai le focus sur l'éditeur.

Faire une espèce de focus sur la balise <b>, sauf que c'est mon éditeur qui prend le focus (ce qui est normal) et du coup la balise <b> ne peux pas prendre le focus. Il doit y avoir un moyen de "moyenner" pour ça fonctionne mais j'arrive pas trouver.


Merci pour ton aide

[Kennel sébastien]

Hum d'accord en fait, il faut que tu regardes du coter des sélections.

Je ne sais plus exactement la démarche sur le moment, mais tu as :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.selection.createRange()
selectionStart
selectionEnd
getSelection()

Pour cela ;-)

[La_Buse]

Alors effectivement j'ai réussi avec getSelection()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
document.addEventListener('keyup', function() {
    var select = document.getSelection().anchorNode;        // retourne le noeud courant
 
    var node = select.parentNode.nodeName;                    // retourne une valeur stringuifié du noeud
 
        switch (node) {                           // test de node en fonction du type de noeud
        case 'B':                                    // gras balise <b>
            console.log('bold actif !!');
            document.getElementById('boldSwitch').classList.add('actif');
            break;
        case 'I':                                     // Italic balise <i>
            console.log('italic actif !!');
            document.getElementById('italicSwitch').classList.add('actif');
            break;
        case 'U':                                    // Souligné balise <u>
            console.log('Underline actif !!');
            document.getElementById('underlineSwitch').classList.add('actif');
            break;
        case 'A':                                    // Lien balise <a>
            console.log('Lien actif !!');
            document.getElementById('linkSwitch').classList.add('actif');
            break;
        default: 
                console.log('rien actif');
                document.getElementById('boldSwitch').classList.remove('actif');  
                document.getElementById('italicSwitch').classList.remove('actif');
                document.getElementById('underlineSwitch').classList.remove('actif');
                document.getElementById('linkSwitch').classList.remove('actif');
 
               // "désactivation" des boutons
    } 
});

Merci beaucoup pour ton aide Kennel sébastien

J’espère que mon explication est claire pour ceux qui seraient dans le même cas que moi dernièrement.

Sujet résolut

Encore une fois merci

[Beginner.]

Ah je t'ai répondu avant d'avoir lu ton dernier message...

Je regarde ton code...

Alors effectivement j'ai réussi avec getSelection()

Ce que tu as fait est beaucoup mieux que d'ajouter un événement à chaque balise de formatage, là tu n'as plus qu'un seul écouteur...

Mais cela ne marchera pas toujours... Par exemple dans le cas de balises imbriquées comme cet exemple :

Ceci <b>est un <u>sim|ple</u></b> exemple...

dont le rendu visuel est : Ceci est un sim|ple exemple...

Si tu places le curseur (à la position indiquée par le le caractère"|") eh bien ton code t'indiquera que tu es dans le cas "U" ce qui est vrai mais tu ne seras pas que le texte est aussi en gras (cas "B")...


Ce n'est qu'un exemple mais qui peut être fréquent car dans un texte il peut y avoir plusieurs balises imbriquées de toute sorte...

[Beginner.]

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() ).

Ah ben on a beaucoup discuté dernièrement (un autre membre travaillait sur la conception d'un un éditeur HTML WYSIWYG)...

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".

Oui effectivement c'est une bonne idée, je suppose que tu veux le faire pour tous les formatages (gras, italique, surligné...) ?

En gros mon problème c'est que je n'arrive pas a ajouter un évènement de type clavier a ma balise <b>

Par contre ça, cela me semble une mauvaise idée... Cela me parait énorme de devoir ajouter un événement à chaque balise de formatage sachant qu'il peut y en avoir beaucoup et en plus il faut tenir compte du fait que le texte est susceptible de changer de nombreuses fois...

Si vous avez une idée pour résoudre mon problème je vous remercie d'avance.

Oui il me semble bien qu'il y a une fonction pour ça mais il faut que je revois cela et que je fasse des tests... Je te tiens au courant...

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.

Je suis aussi un peu comme ça...