selection

Eléphanteau du PHP | 38 Messages

06 mai 2010, 16:06

Bonjour,

J'aimerai créer une petite barre d'outils (bold, italique, etc...), comme ici en fait, associé à un textarea.

Quel propriétés sont utilisés en javascript pour exploiter du texte sélectionné (pour après ajouter les balise "<b>" au début et <//b> à la fin du texte.

merci d'avance!

ViPHP
ViPHP | 928 Messages

06 mai 2010, 16:17

Salut,
en gros tu veux te faire ton propre WYSIWYG. C'est loin d'être facile en fait, car comme d'habitude certaines propriétés / méthodes diffèrent entre les navigateurs (les joies du web). A moins d'avoir des connaissances très correctes en Javascript je te recommande plutôt d'utiliser un script WYSIWYG tout fait, au moins tu auras un truc sympa et qui marche sur tous les navigateurs :)

Eléphanteau du PHP | 38 Messages

06 mai 2010, 16:23

OK, c'est moins sympa que de faire tout soit même mais si la roue a déjà été inventé pourquoi en refaire une nouvelle?, ou puis-je me procurer cette merveille?

je suis aussi intéressé par le procédé qui consiste à placer le texte sélectionné dans une variable.

ViPHP
ViPHP | 928 Messages

06 mai 2010, 17:19

Des éditeurs WYSIWYG il en existe à la pelle, recherche sur Google pour trouver ton bonheur. Tu pourras faire ton choix parmi des mastodontes comme FCKeditor, ou des projets un peu plus modestes comme MooEditable (mon petit coup de coeur, mais nécessite Mootools).

Après si tu as envie de te lancer dans l'aventure de le code par toi même pourquoi pas, mais c'est relativement très mal documenté. Il s'agit d'utiliser des propriétés nommées designMode et contentEditable en Javascript dans mes souvenirs, mais pour l'avoir fait moi même je peux te certifier que c'est une vraie galère.

Sinon pour ce qui est de la sélection du texte je te conseil de passer par un Framework, je te conseil Mootools puisque c'est celui que j'utilise et que je sais qu'il permet de la manipulation de Range (sélection de texte) facilement (http://mootools.net/docs/more/Element/Element.Forms). De plus tu pourras utiliser MooEditable comme ça :D