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

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

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

[La_Buse]

Effectivement tu as raison je creuse ça.

Je vous tien au courant
Merci encore

[Beginner.]

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

[La_Buse]

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

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

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

[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

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

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

Merci beaucoup pour votre aide.

[La_Buse]

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 :

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

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

[La_Buse]

Bonjour Beginner et bonjour à tous.

Voila où j'en suis:

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

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

[NoSmoking]

Bonjour,

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 :

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

1
2
3
4
var oInput= document.createElement('INPUT');
oInput.setAttribute('type', 'color');
alert( oInput.type ===  'color');
</script>

ou un truc dans ce style.

[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" />

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