Bouton actif/inactif d'un élément de mise en forme d'un éditeur WYSIWYG

Version imprimable

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:

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

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

13/04/2017, 14h55
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 » ;-)
13/04/2017, 15h08
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
13/04/2017, 16h00
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:

1 2 3 4 document.selection.createRange() selectionStart selectionEnd getSelection()
Pour cela ;-)

Sujet résolut

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

Code:

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 :)

13/04/2017, 17h35
Beginner.

Citation:

Envoyé par La_Buse

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

Citation:

Envoyé par La_Buse

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é...) ?

Citation:

Envoyé par La_Buse

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

Citation:

Envoyé par La_Buse

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

Citation:

Envoyé par La_Buse

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...
13/04/2017, 17h56
Beginner.

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

Je regarde ton code...

Citation:

Envoyé par La_Buse

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...
13/04/2017, 18h19
La_Buse

Effectivement tu as raison je creuse ça.

Je vous tien au courant
Merci encore
13/04/2017, 21h00
Beginner.

Je te laisse chercher mais si tu ne nous trouves pas j'ai une solution qui fonctionne apparemment...

J'ai réussi à trouver quelque chose qui a l'aire de fonctionner:

Mon éditeur est un <div contenteditable="true"></div>

Code:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
function buttonTest() {
    var select = document.getSelection().anchorNode;
    var test = {
        B: false,
        I: false,
        U: false,
        A: false
    };
 
 
    while (node !== 'DIV') {
        var node;
 
        select = select.parentNode; 
 
        node = select.nodeName;
        console.log(node);
 
        switch (node) {
        case 'B':
            console.log('bold actif !!');
            document.getElementById('boldSwitch').classList.add('actifSwitch');
            test.B = true;
            break;
        case 'I':
            console.log('italic actif !!');
            document.getElementById('italicSwitch').classList.add('actifSwitch');
            test.I = true;
            break;
        case 'U':
            console.log('Underline actif !!');
            document.getElementById('underlineSwitch').classList.add('actifSwitch');
            test.U = true;
            break;
        case 'A':   
            console.log('Lien actif !!');
            document.getElementById('linkSwitch').classList.add('actifSwitch');
            test.A = true;
            break;
        default: console.log('rien actif');
                test.B === false ? document.getElementById('boldSwitch').classList.remove('actifSwitch') : null;
                test.I === false ? document.getElementById('italicSwitch').classList.remove('actifSwitch') : null;
                test.U === false ? document.getElementById('underlineSwitch').classList.remove('actifSwitch') : null;
                test.A === false ? document.getElementById('linkSwitch').classList.remove('actifSwitch') : null;
        } 
    }
}
 
document.addEventListener('keyup', buttonTest);
document.addEventListener('click', buttonTest);

Ma fonction va donc chercher à chaque tour de boucle les parents de la sélection j'usqu'à la <div>.
Je modifie mon bouton si la balise est utilisée.

Dés qu'il rencontre une <div> ou une autre balise (<p>, <br />, ...) il va dans le default et supprime la class="actifSwitch" si elle n'est pas utilisé.

Il y a peut être plus simple ...

13/04/2017, 23h01
Beginner.

Ah ben bravo tu as pigé le principe à ce que je vois...

Le faire comme ça c'est plus formateur je trouve... Ceci dit cela peut devenir plus compliqué pour les autres formatages comme la police, la taille de la police... Car là il faut plus que juste récupérer le nodeName...

Il y a aussi le fait que les balises utilisées par la fonction execCommand ne sont pas toujours les mêmes selon le mode et le navigateur, tu pourrais avoir <strong> à la place de <b> ou <em> à la place de <i>...

Et si le "mode" est css, la fonction execCommand utilisera des balises <span> avec un style inline. Et même sans ce mode elle peut utiliser <span> pour certains cas...

Bref, il y a une fonction qui facilite les choses : queryCommandValue()...

Je l'ai testée avec le gras et j’affiche la fontname ici : http://jsbin.com/lowadufero/edit?js,console,output...

Sur Chrome cela marche bien (une fois qu'on a pigé qu'il ne renvoi pas un booléen mais une string "false"/"true") mais sur FF le bold ne fonctionne pas, Il faut utiliser à la place la fonction : document.queryCommandState('bold'); que tu peux tester ici : http://jsbin.com/newunajubo/edit?js,console,output
14/04/2017, 08h10
La_Buse

Bonjour Beginner, bonjour à tous,

Au niveau des balises <b> (gras), <i> (italic) et <u> (souligné) je les échange par <strong>, <em> et <span class="underline"> du côté php avant l'insertion en base de donnée. Serait-ce plus performant de s'en occuper directement en JavaScript?

C'est vrai que je n'est tester mon script que sur Firefox tu fais bien de faire penser de le tester avec les autres navigateur (IE me fait vraiment peur pour le coup :aie:).

Je vais m'attaquer aujourd'hui aux formatages plus compliqué, je vous tien au courant.

Merci beaucoup pour votre aide.

Je ne doit pas être très fute fute mais je n'arrive pas comprendre ni a trouver d'exemple sur useCSS ou styleWithCSS.

Voici le bout de code de mon execCommand :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function commande(nom, argument) {
    if (typeof argument === 'undefined') {
        argument = '';
    }
 
    switch (nom) {
        case 'createLink':
            argument = prompt('Saisissez l\'adresse du lien');
            break;
        case 'insertImage':
             argument = prompt('Saisissez l\'adresse de l\'image');
            break;
    }
 
    switch(argument) {
        case 'paragraphe':
            nom = 'insertParagraphe';
            break;
    }
    document.execCommand(nom, false, argument);
    document.getElementById('editeur').focus(); 
}

Où est-ce que je doit inclure cette "fonction" ?
Du coup j'ai essayé de remplacer les balise grâce à string.replace met ça fait vraiment pas beau du tout.

14/04/2017, 21h13
Beginner.

Salut,

As-tu testé les deux liens que je t'ai indiqués au message #11 ? Est-ce que cela fonctionne chez toi ?
Est-ce que cela résout ta question initiale ?

Si oui, il faudrait je pense ouvrir d'autres fils pour tes autres questions et laisser celui-ci en résolu.
15/04/2017, 09h12
La_Buse

Editeur WYSIWYG v1.0 Beta made by La_Buse

Bonjour Beginner et bonjour à tous.

Voila où j'en suis:

https://jsbin.com/wucalet/1/edit?html,css,js,output

Citation:

Bref, il y a une fonction qui facilite les choses : queryCommandValue() ...
... mais sur FF le bold ne fonctionne pas, Il faut utiliser à la place la fonction : queryCommandState(); que tu peux tester ici : http://jsbin.com/newunajubo/edit?js,console,output

J'ai tester ton code avec succès mais je voulais aller au bout de mon résonnement.

Donc cet éditeur ne casse pas des briques mais fonctionne. Par contre j'ai pas fait attention que :zekill: IE ne prenait pas encore en compte le <input type="color" /> donc il faut que je modifie cela. J'en profiterai pour le refaire en utilisant queryCommandState(); et queryCommandValue(); Ce qui allègera le script.

Par contre est-il possible de cibler un navigateur pour déclencher la fonction adéquat? (je n'est pas encore chercher, la question me passe par la tête donc je la pose mais je met tout de suite au boulot ...)

Merci beaucoup pour ton aide :)
15/04/2017, 09h46
NoSmoking
Bonjour,

Citation:

Par contre est-il possible de cibler un navigateur pour déclencher la fonction adéquat?

tu peux toujours tester comment le navigateur interprète ton <input type="color">.
Code:

1 2 3 4 var oInput= document.createElement('INPUT'); oInput.setAttribute('type', 'color'); alert( oInput.type === 'color'); </script>
ou un truc dans ce style.
15/04/2017, 14h20
La_Buse

Donc effectivement avec queryCommandState(); ça donne un script beaucoup plus propre et plus simple.

http://jsbin.com/wucalet/edit?html,js,output

Apparemment chez moi queryCommandState(); fonctionne sur Firefox, Chrome, Opera et IE et Safari (je n'est pas encore tester les version portable), et document.queryCommandValue() fonctionne sur Chrome, Opera, IE et Safari.

Donc j'opte pour utiliser que queryCommandState(); Est-ce que c'est un bon choix?

Donc voici le résultat :
http://jsbin.com/wucalet/edit?html,js,output

Par contre ni queryCommandState(); ni queryCommandState(); ne prennent en comptes les commandes 'header' et 'createLink' et 'insertImage' c'est pour cela que j'ai gardé mon ancienne méthode pour les liens, les titres et la couleur.

Je n'est pas encore touché au <input type="color" />
15/04/2017, 15h56
Beginner.

Ah ben il est bien ton éditeur... C'est bien que tu l'aies posté comme ça on pourra faire les tests...

Sinon oui il vaut mieux utiliser queryCommandState() pour toutes les commandes pour lesquelles elle fonctionne... Mais pour les formatages avec une "valeur" il faut utiliser queryCommandValue(), j'ai testé sur FF et Chrome et ça fonctionne... Cette fois cela fonctionne avec les deux navigateurs car je pense que la fonction renvoi une string correspondant à la valeur...

---> formatages avec une "valeur" : je veux dire par exemple la commande fontname, dans ce cas la valeur c'est le nom de la police.
Autre exemple la commande foreColor, dans ce cas la valeur c'est la couleur de la police.

En fait ces fonctions portent bien leur noms : pour récupérer l'état (state) ---> queryCommandState() et pour récupérer la valeur (value) ---> queryCommandValue()...

PS : Pour la mise en place des autres fonctions comme creatlink, peut-être que ce serait mieux d'ouvrir un autre fil...