Partage

Couleur de la police dans un textaera

Sujet résolu

25 février 2009 à 16:17:45

Bonjour!

J'ai un petit problème

J'ai un projet personnel à rendre en fin d'année. Et j'ai eu l'idée de faire une sorte traitement de texte mais en javascript.
Le problème pour le moment que je n'arrive pas à résoudre est:

J'utilise un textarea pour saisie le texte que tape l'utilisateur, et je voudrai que les élément décoratif (couleur, italic...) prennent formes directement dans le textarea. Sans passer par une prévisualisation.
Je m'explique par exemple quand on tape une réponse ici sur le site du zéro, on utilise du bbcode on entoure le texte par des balises et puis ensuite on voit ce que ça donne dans le cadre de prévisualisation. Mais dans la zone de saisie on vois les balises <couleur >texte colorier</couleur>.

Moi c'est ça que je veux faire disparaitre, je ne veux pas de balise qui entoure mon texte je voudrai que le style prenne effet directement dans mon textarea lorsque je tape.
Comme un vrai traitement de texte en clair!

Je sais que c'est possible de faire mais comment je ne sais pas, et c'est pourquoi je viens vous demander de l'aide.

Après quelques recherche j'ai essayé avec variable.fontcolor("red"); par exemple mais cela me met texte dans le textarea :/

merci de l'attention porté à ma demande.

Cordialement,

Z€D.

Golmote

25 février 2009 à 16:23:23

Dans un textarea tu peux pas je crois...

Eventuellement un div editable... mais c'est tout.

restimel

25 février 2009 à 16:29:13

Je ne crois pas que ce soit possible dans un textarea (comme dans un input). C'est du tout ou rien.
Tu peux par contre le simuler dans un div où tu catch tous les événements claviers...

Edit: grilled

Z€D

25 février 2009 à 16:34:49

Citation : restimel

Je ne crois pas que ce soit possible dans un textarea (comme dans un input). C'est du tout ou rien.
Tu peux par contre le simuler dans un div où tu catch tous les événements claviers...

Edit: grilled

'où tu catch tous les événements claviers...'

tu entends quoi par là? tu peux expliquer s'il te plaît merci.

Golmote

25 février 2009 à 17:10:01

Tu crées une fonction qui, à chaque appui sur une touche du clavier, modifie le contenu du div.

(Si l'utilisateur appuie sur "a", ça ajoute un "a" ; s'il appuie sur "Retour arrière", ça efface des caractères, etc.
Tu dois aussi pouvoir récupérer la sélection pour pouvoir mettre un texte en gras, etc. (je pense))

frigodor

25 février 2009 à 17:13:04

Tu pourrais le faire en Ajax (mélange de php et de js) mais ce serait hyper compliqué, je dis bien "HYPER". Tu as quelques connaissances en Ajax ?

Golmote

25 février 2009 à 17:16:00

C'est encore plus compliqué que nos solutions non ? o_O

Z€D

25 février 2009 à 17:49:50

Oui j'ai quelques connaissance en AJAX enfin j'ai déjà pratiqué ( faire un clique sur un lien pour afficher le contenu d'une page, rechercher dans une base de donnée pendant qu'on saisit un identifiant par exemple, la prévisualisation d'un texte balisé par du BBcode)

Voila ce que j'ai déjà fais en ajax, je pense que tous cela est la base non?

Mais j'ai déjà commencé l'histoire de la simulation du clavier.
Mais j'ai un petit souci au niveau des caractères je pense qu'il s'agit d'une histoire d'encodage. Mais lequel?? :/

<html> 
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
function affiche(texte)
     {
     document.getElementById('afficher').innerHTML = texte;
     }

var touche = window.evenement ? evenement.keyCode : evenement.which; // ie ou firefox
		//touche = String.fromCharCode(touche);
			
function quelle_touche(evenement)
   {
		 
		  touche = touche + String.fromCharCode(touche) ;
		   affiche(touche);
	 
   }
   
  

</script>
</head>
<body onkeyPress="quelle_touche(event);">

   <div style="border:1px #000000 solid; width: 300px; height: 300px;"  id="afficher"> </div>
   
</form>

</body>
</html>

voici le bout de code pour le moment que je suis entrain de tester, la simulation fonctionne mais ça me met des losanges avec un point d'interrogation à l'intérieur. :/
Comment le résoudre?
Je pense qu'une fois ce petit problème résolu je pourrai m'en sortir tout seul par la suite j'ai compris le principe général.

merci

frigodor

25 février 2009 à 17:55:15

Si tu te débrouille assez bien en Ajax, tu pourrais le faire.
Il faudrait remplacer le <textarea> par un et quand l'utilisateur appuye sur une touche tu l'ajoute au "". Ensuite, tu fais des regex en ajax pour que le se mette à jour à chaque lettre ajouté.
Ca te tente ?

Un petit souci dans l'encodage ?
Comme quoi ?

Z€D

26 février 2009 à 9:18:13

Citation : frigodor

Si tu te débrouille assez bien en Ajax, tu pourrais le faire.
Il faudrait remplacer le <textarea> par un et quand l'utilisateur appuye sur une touche tu l'ajoute au "". Ensuite, tu fais des regex en ajax pour que le se mette à jour à chaque lettre ajouté.
Ca te tente ?

Un petit souci dans l'encodage ?
Comme quoi ?

oui un petit souci

ça me met des losanges avec des points d'interrogations à l'intérieur... j'ai utilisé pourtant
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
dans l'entête de ma page...

je vais y travailler là dessus ce matin je vous tiens au courant si je résous ou pas mon problème.

Golmote

26 février 2009 à 11:05:52

Pourquoi passer par des regex PHP en Ajax, plutôt que par des regex JS sans Ajax ?

Passer par Ajax, ça va carrément ralentir l'édition, non ?

Z€D

26 février 2009 à 11:15:12

je ne pense pas que je vais m'orienter vers l'ajax pour ce projet, je me suis fixé comme objectif une application entièrement en javascript.
Donc je resterai en javascript parce que premièrement en cours on n'a pas étudié l'AJAX et deuxième il s'agit d'une occasion pour moi d'approfondir mes connaissances en Javascript.

existe-t-il une documentation officielle en français sur le javascript?

Golmote

26 février 2009 à 11:25:40

Rien d'officiel à ma connaissance.

Par contre je ne comprends pas le rapport entre ma remarque et ta réponse... o_O

J'ai l'impression que frigodor te propose d'utiliser Ajax afin de "parser" les informations grâce à des Regex PHP... Alors qu'il serait tout à fait possible de les "parser" avec des Regex Javascript.

Z€D

26 février 2009 à 11:39:29

oui ça ça sera lorsque je voudrai mettre en gras, souligne etc...

Mais j'en suis encore au stade de la saisie, pour le moment je bloque sur le fait d'accumuler les touches taper au clavier!

Avec le bout de code que j'ai mis plus haut il y a une accumulation des touches mais impossible de voir quelle touche a été tapée? :/ ça me mets des losanges avec des points d'interrogation...

Si vous savez la solution ou un conseil pour résoudre ce petit problème, je suis preneur parce que je rame un peu là.

Ma logique pour le moment me semble correct, après il y peu être quelques lacune dans le langage mais ce n'ai pas l'essentielle du problème...
lors d'une frape au clavier je l'affiche mais c'est l'accumulation des touches qui me pose problème... un indice pour moi??

EDIT::

ça y est j'ai résolu mon problème

tout ce que je tape au clavier s'afficher correctement dans une div!
Maintenant j'aimerai simuler l'effacement de la touche backspace donc je fais ma condition si l'utilisateur tape sur la touche backspace on efface un caractère mais le problème c'est que lorsque j'appuie sur cette touche mon navigateur le comprend comme retour arrière!!

Donc est-ce qu'il est possible d'annuler cette fonctionnalité grâce au javascript?

merci

EDIT::

re!

bon j'ai trouvé comment annuler le backspace:
onKeyPress="if(event.keyCode == 8) return false; else (quelle_touche(event));"

cela annule sa fonction mais apparement ça annule aussi sa valeur parce que dans ma fonction quelle_touche() lorsque je tape sur backspace il devrai s'afficher 'test' et là rien ne se passe :/
Et puis si je retourne pas false le retour arrière va s'effectuer... ralala ><

une idée svp ?

merki

Dentuk

26 février 2009 à 13:11:45

Tu vas galérer pour simuler entrée, caps lock, shift, ... qui n'est pas ton boulot.
Une solution un peu bricolée serait de cacher le textarea de la sorte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Ma super page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="pouet.js"></script>
        <!-- le textarea est bien présent mais "caché" (visibility: hidden et display: none empecheraient que l'on puisse taper dedans) -->
        <style type="text/css">
            #entree { float: left; margin-left: -20px; width: 0; height: 0; }
        </style>
    </head>
    <body>
        <form>
            <textarea id="entree"></textarea>
            <p id="sortie"></p>
        </form>
    </body>
</html>

window.onload = function () {
    var entree = document.getElementById("entree");
    entree.onkeyup = function () {
        var sortie = document.getElementById("sortie");
        // vide le <p></p>
        while (sortie.firstChild)
            sortie.removeChild(sortie.firstChild);
        // ici on écrit juste le texte tapé en gérant les sauts de ligne (à adapter)
        for each (var ligne in this.value.split("\n")) {
            sortie.appendChild(document.createTextNode(ligne));
            sortie.appendChild(document.createElement("br"));
        }
    }
    // premier appel pour initialiser le <p></p> si le textarea est déjà rempli
    entree.onkeyup();
    // on donne le focus au textarea, sinon on ne rentrera jamais dedans
    entree.focus();
}

Par contre si tu perds le focus, c'est foutu. :lol:

Il faudrait le forcer dès qu'on le perd, ou bien mettre un timer qui remet le focus au bout de x secondes... Un peu galère, donc.
C'est une idée entre autre, à toi de voir comment tu veux gérer ça. :-°

Le plus simple étant de garder le textarea visible.

Edit:
Regarde les sources de TinyMCE aussi si ça peut t'inspirer (pas de c/c de bourrin par contre :-°

), un exemple :
http://tinymce.moxiecode.com/examples/simple.php
(Peut-être trop imbuvable en fait. Ca montre que c'est possible, au moins. :-°

)
Sinon pour de la doc sur javascript le MDC est pas mal :
https://developer.mozilla.org/Fr

Z€D

27 février 2009 à 10:10:41

impec!!

merci pour ce script!

Je comprends pas toutes les lignes de codes mais bon je vais essayer de trouver de la doc pour mieux comprendre le fonctionnement.
Et puis pour la perte du focus ce n'est pas si complqué; document.monformulaire.montextarea.focus() dans une fonction et hop il est revenu si on clique sur la balise !

Merci de votre aide en tout cas!!

Dentuk

27 février 2009 à 10:45:39

Tiens pas bête, j'y avais pas pensé, par contre je pense que le faire sur la fenêtre entière serait plus judicieux (pour si le textarea est vide ou pas assez long pour que le click soit détecté).
Pour les choses que tu ne comprends pas, s'il s'agit de ça:

// vide le <p></p>
        while (sortie.firstChild)
            sortie.removeChild(sortie.firstChild);
        // ici on écrit juste le texte tapé en gérant les sauts de ligne (à adapter)
        for each (var ligne in this.value.split("\n")) {
            sortie.appendChild(document.createTextNode(ligne));
            sortie.appendChild(document.createElement("br"));
        }

Alors sache que c'est juste un équivalent plus propre de sortie.innerHTML = this.value.replace("\n", " ") .
Si c'est autre part que tu as un problème, n'hésite pas à demander.

Z€D

27 février 2009 à 11:42:47

a oki je comprends mieux!

et pour l'histoire du focus après quelques testes j'ai opter pour la redirection du focus quand l'utilisateur frappe une touche au clavier, parce que lorsque l'utilisateur va cliquer pour sélectioner du texte, la sélection qu'il aura faites ne restera pas. Donc l'événement onkeypress me paraît le mieux adapté à ma situation.

Grâce à vous mon projet avance lentement mais sûrement!

Pour le moment j'arrive à retourner ce que l'utilisateur sélectionne à la souris, il me reste à envoyer ça dans une regex pour entourer la sélection, de balise html pour la colorier par exemple. Normalement vu que la saisie est sortie dans un , les balises ...texte selectionné à la souris devrai s'annuler pour mettre en couleur ...texte selectionné à la souris...

Suis-je sur la bonne voie?

Et encore merci!

Golmote

27 février 2009 à 13:02:44

Je crois que oui.

Z€D

27 février 2009 à 14:38:57

re les gens!

et oui c'est encore moi!

Vous allez finir par croire que je suis vraiment un zéro!

Là je bloque sur un mystère!

function selection()
 {
 var sel = getSelectedText(); // ma fonction qui retourne ce que j'ai sélectionner
 var chaine = "été";
 
 chaine=chaine.replace(/[éèêë]/g, "e"); // remplace les e avec accent par des simple e
 
 alert(chaine);
 }

Ce bout de code fonctionne très bien mais le problème c'est que j'aimerai attribuer à la variable 'chaine' la valeur de la variable 'sel'
Et quand je fais var chaine = sel; ça ne fonctionne pas, l'alerte ne s'execute même pas. C'est cette attribution qui plante tout mon script...
Je suis sur qu'il y a le texte selectionné par l'utilisateur dans la variable 'sel' puisque quand je fais alert(sel) quand je n'attribue pas chaine = sel; l'alerte me renvoie bien le contenue sélectionné.

voyez-vous d'où peut venir le problème?

Golmote

28 février 2009 à 14:16:28

... Mais pourquoi tu fais pas

var chaine = getSelectedText();

???

Z€D

2 mars 2009 à 9:18:11

et ben écoute je l'ai déjà tenté mais sans succès non plus, est-ce que getSelectedText(); ne passerai pas dans une regex??

o_O

EDIT::

Ayez j'ai trouvé la solution à mon problème! Merci quand même d'avoir essayé de m'aider.

A bienôt, et merci encore!

Golmote

2 mars 2009 à 11:03:54

Donne la solution, ça pourrait servir à d'autres.

Et pense à mettre ton sujet en résolu

Z€D

2 mars 2009 à 11:16:43

Il fallait convertir en chaine de caractère la sélection faites par la souris.

var sel = window.getSelectedText(); // ma fonction qui retourne ce que j'ai sélectionner
sel = sel.toString() ; // converti la selection en une chaine de caractère
var chaine= sel; // j'attribue la valeur de sel à chaine.

voilou