11548 sujets

JavaScript, DOM et API Web HTML5

Coloration syntaxique avec JavaScript

Modérateur
Bonjour,

Je débute en Javascript. Je souhaiterais confectionner une fonction simple permettant de colorer à la volée du BBCode. Je sais qu'il existe des choses telles que geshi, codemirror, ...
Mais ça ne m'intéresse pas vraiment. Je voudrai mettre les mains dans le cambouis.
Ce qu'il faudrait que je sache est comment je dois m'y prendre, la démarche quoi.
La coloration devrait se faire dans un textarea à la volée. Je comprends qu'il faudra que je modifie le style css des blocs à mettre en évidence et je pense pouvoir faire ça mais ce que je n'arrive pas à comprendre st comment faire pour que la modification du style des éléments à mettre en évidence se fasse à la volée. onFocus() ? onKeyDown() ? Je me demande s'il ne faudra pas mettre plusieurs éléments à la fois...
Ce serait bien si vos pouviez me montrer un exemple de code (geshi et codemirror sont trop complexes pour mes maigres connaissances)

Merci d'avance pour vos réponses. Smiley smile
Modifié par jojaba (13 Jan 2011 - 16:15)
Attention, tu t'attaques à un gros, gros morceau...
D'ailleurs tu remarqueras que presque personne ne fait de coloration syntaxique à la volée en HTML (+CSS+JavaScript). Le seul projet à ma connaissance qui fasse ça, en dehors de codemirror que tu cites, c'est Mozilla Skywriter (anciennement Bespin).

jojaba a écrit :
La coloration devrait se faire dans un textarea à la volée.

Pas possible. Un TEXTAREA ne contient que du texte, donc pas de noeuds DOM que tu peux styler. Par contre, tu peux voir du côté de contentEditable en HTML5.

jojaba a écrit :
Ce serait bien si vos pouviez me montrer un exemple de code (geshi et codemirror sont trop complexes pour mes maigres connaissances)

Tu souhaites reproduire quelque chose qui ressemble à codemirror, mais sans être capable de comprendre le fonctionnement de ce dernier? Ça me semble mal parti. Ou alors j'ai mal compris ta demande.
Modérateur
Florent V. a écrit :
Attention, tu t'attaques à un gros, gros morceau...
D'ailleurs tu remarqueras que presque personne ne fait de coloration syntaxique à la volée en HTML (+CSS+JavaScript). Le seul projet à ma connaissance qui fasse ça, en dehors de codemirror que tu cites, c'est Mozilla Skywriter (anciennement Bespin).

Je vais préciser un peu ce que je voudrais faire, ça n'est pas aussi complexe que ça en a l'air.
En fait, je souhaiterais colorer les balises BBCode dans un textarea d'un forum. Nul besoin d'une artillerie lourde telle que Codemirror pour faire ça je pense. Il faudrait donc repérer les motifs '[...]' dans le textarea (en utilisant des regexp donc) et de les entourer de balises span (HTML) qui modifieraient le style (par exemple la couleur) des motifs trouvés.
a écrit :

Tu souhaites reproduire quelque chose qui ressemble à codemirror, mais sans être capable de comprendre le fonctionnement de ce dernier? Ça me semble mal parti. Ou alors j'ai mal compris ta demande.

On peut faire ça dans une fonction toute simple je suppose, au lieu d'utiliser des variables contenant des fonctions, contenant d'autres fonctions... (c'est ce que je n'arrive pas bien à comprendre pour l'instant, mais je ne désespère pas...).
Mais bon, je ne suis pas un spécialiste hein Smiley langue
Modifié par jojaba (14 Jan 2011 - 13:50)
jojaba a écrit :
On peut faire ça dans une fonction toute simple je suppose, au lieu d'utiliser des variables contenant des fonctions, contenant d'autres fonctions...

Ça c'est une structure standard en JavaScript: l'organisation de code en modules. On en parle ici par exemple:
http://www.alsacreations.com/article/lire/565-JavaScript-organiser-son-code-en-modules.html
Voir aussi: Syntaxes des modules en JavaScript et conventions d'écriture.

Pour faire quelque chose de simple, il me semble qu'il faudrait au minimum:
- Travailler avec contentEditable (dans un TEXTAREA, à ma connaissance c'est juste pas possible). Note que ça ne sera pas forcément compatible avec tous les navigateurs, car c'est un ancien mécanisme d'IE standardisé récemment.
- Peut-être s'assurer que le texte édité est organisé en paragraphes, pour avoir un découpage un peu fin et pouvoir ne parseurr qu'un paragraphe à la fois.
- Un parseur maison pour rajouter ou enlever tes <span> de coloration. Note qu'il faudra sans doute les enlever lors de l'enregistrement du contenu.
- Des gestionnaires d'évènement JavaScript pour réagir à chaque fois qu'une touche est pressée ou presque. Peut-être avec un délai d'attente avant de lancer ton parseur maison (pour éviter de le faire à chaque quart de seconde pendant la frappe).

Gros boulot en perspective, bien que la fonctionnalité visée soit simple en apparence.
Modérateur
Florent V. a écrit :

Ça c'est une structure standard en JavaScript: l'organisation de code en modules. On en parle ici par exemple:
http://www.alsacreations.com/article/lire/565-JavaScript-organiser-son-code-en-modules.html
Voir aussi: Syntaxes des modules en JavaScript et conventions d'écriture.

Merci pour les liens Smiley cligne

Pour faire quelque chose de simple, il me semble qu'il faudrait au minimum:
- Travailler avec contentEditable (dans un TEXTAREA, à ma connaissance c'est juste pas possible). Note que ça ne sera pas forcément compatible avec tous les navigateurs, car c'est un ancien mécanisme d'IE standardisé récemment.

Ça s'est du HTML5 tu as dit. Or, je travaille en xhtml strict 1.0...
a écrit :

- Peut-être s'assurer que le texte édité est organisé en paragraphes, pour avoir un découpage un peu fin et pouvoir ne parseurr qu'un paragraphe à la fois.

Je rappelle que c'est un message de forum qui est édité, donc pas de paragraphe et uniquement des balises BBCode.
a écrit :

- Un parseur maison pour rajouter ou enlever tes &lt;span&gt; de coloration. Note qu'il faudra sans doute les enlever lors de l'enregistrement du contenu.

J'avais pas pensé au fiat qu'il fallait supprimer les &lt;span&gt; lors de la validation des modifications. Merci.
a écrit :

- Des gestionnaires d'évènement JavaScript pour réagir à chaque fois qu'une touche est pressée ou presque. Peut-être avec un délai d'attente avant de lancer ton parseur maison (pour éviter de le faire à chaque quart de seconde pendant la frappe).

Je pense laisser tomber le délai pour l'instant (je ne vois pas trop comment faire de toute manière). Donc l'évènement qui doit déclencher la coloration est 'onKeyDown'. Merci pour ça également.
a écrit :

Gros boulot en perspective, bien que la fonctionnalité visée soit simple en apparence.

Si je me décide à me lancer, je mettrai ici les fruits de mon travail Smiley cligne
jojaba a écrit :
Ça s'est du HTML5 tu as dit. Or, je travaille en xhtml strict 1.0...

D'une, rien ne t'oblige à travailler en XHTML 1.0.
De deux, les navigateurs n'implémentent de toute manière qu'une version de HTML, donc même en restant sur un Doctype XHTML 1.0 tu peux piocher des fonctionnalités de HTML5 et les introduire dans tes pages. Ça fera quelques erreurs de validation mais si tu sais ce que tu fais ça n'est pas un problème (la validation est un outil, pas une fin en soi). Ce qui compte, c'est le support -- ou non -- dans les navigateurs.

jojaba a écrit :
Je rappelle que c'est un message de forum qui est édité, donc pas de paragraphe et uniquement des balises BBCode.

Un message de forum peut tout à fait contenir des paragraphes. Ça dépend du fonctionnement du forum, je suppose, mais dans l'absolu l'un n'exclut pas l'autre.

jojaba a écrit :
Je pense laisser tomber le délai pour l'instant (je ne vois pas trop comment faire de toute manière).

Tu ne peux rien faire d'utilisable si tu ne gères pas ça.
Modérateur
Florent V. a écrit :

D'une, rien ne t'oblige à travailler en XHTML 1.0.

J'utilise FluxBB. Il est codé en xhmtl 1.0.
Florent V. a écrit :

Tu ne peux rien faire d'utilisable si tu ne gères pas ça.

Je prends note. Merci pour tes indications et conseils. Smiley smile
Modérateur
Voilà comment je vois la fonction qu'il faudrait créer :
1) Récupérer le contenu du textarea
2) Vérifier s'il contient des balises BBCode et modifier le style de ces balises
3) Remplacer les balises dans le contenu par ce qu'il faut pour modifier leur style
4) Renvoyer le contenu modifié
5) Petit timeout pour éviter que la fonction ne soit exécutée constamment
6) Indiquer quel évènement déclenche la fonction (à priori ce seriat un OnKeyDown mais il faudra aussi traiter le chargement de la page, la sélection également et puis lors de la soumission du formulaire il faudra penser à enlever tout ce qui a été ajouté)

Un point me pose problème, c'est la modification du style des balises. Je voulais faire ça avec des span mais je viens de me rendre compte qu'ils n'auront aucun effet dans un textarea. Comment je fais alors ?

Merci encore pour votre aide. Smiley smile
Modifié par jojaba (22 Jan 2011 - 17:40)
jojaba a écrit :

Un point me pose problème, c'est la modification du style des balises. Je voulais faire ça avec des span mais je viens de me rendre compte qu'ils n'auront aucun effet dans un textarea. Comment je fais alors ?


C'est un peu ce que florent t'as dit 2 fois ...

Avec ton niveau en javascript sans vouloir t'offenser laisses tomber.
Modérateur
rs459 a écrit :

Avec ton niveau en javascript sans vouloir t'offenser laisses tomber.

Merci en tout cas pour ta franchise. Je pense qu'on va laisser mûrir ça effectivement. Le jour où je saurais comprendre ce qui se passe dans CodeMirror, je devrais pouvoir m'y coller Smiley cligne
On peut voir des exemples de coloration syntaxique de CodeMirror sur le site. Par exemple ici :
http://codemirror.net/contrib/php/index.html
Je pense avoir compris que la coloration ne se fait pas directement dans le textarea mais dans un iframe.

Si jamais un jour j'arrive à faire quelque chose, je reviens ici Smiley cligne Ceci dit, si quelqu'un voulait continuer la discussion sur ce thème, pas de souci, n'hésitez pas !
Sujet clos
Aller à