[resolu] Safari et wysiwyg tout simple en JS probleme de select de txt

Salut à tous,

Je suis actuellement en train de coder une partie wysiwyg sur des formulaires de saisie de mon site. Pour le moment je me limite aux bases, c'est à dire, remplacer une selection par la selection entourée de balises, ou alors inserer un texte à l'endroit du caret.

Je me heutre actuellement à un probleme sous safari.
En effet, sous les navigateurs web courants des solutions existent deja et sont exploitables facilement.
Sous safari, la seule chose que j'ai pu en tirer c'est qu'il fallait utiliser le code

window.getselection

Or lorsque je le teste, il ne me selectionne rien de mon textarea. Par contre si ma selection se porte sur du texte de ma page web, là ça fonctionne. Normal me direz vous, car le getselection est sur l'objet window. Donc bete et mechant que je suis, je teste sur mon objet textarea... bah pas de bol, ca ne passe pas...
A l'aide d'un try catch, j'obtiens l'erreur suivante :

a écrit :
TypeError - Value undefined (result of expression document.getElementById("contenu").getSelection) is not object.

Voici le code utilisé :

var str = document.getElementById('contenu').getSelection();
		alert (str);

Vous l'aurez compris, mon textarea s'appelle contenu (name et id).
Auriez vous une info à ce sujet svp ?
J'avouerai que mis à part les forums IPB je n'ai pas encore rencontré de toolbar fonctionnant vraiment bien sous safari... et j'ai beau triturer le code IPB dans tous les sens, je n'arrive pas à m'en sortir
Merci d'avance !
@++
Modifié par zax-tfh (06 Feb 2006 - 02:35)

Bonjour,
Je n'ai pas tout compris mais
Peut-être cela t'aidera ?

Salut,

En effet, c'est vers cette solution que je me tourne car apparement il n'y a pas de methode viable pour selectionner du texte dans un textarea sur tous les navigateurs...
Le lien que tu proposes, je l'avais deja reperé et ce qui est bien c'est qu'il donne la compatibilité des navigateurs... Or apparement en traitant les 3 cas cités, on peut le faire sur tous les navigateurs. Le seul truc qui m'inquietais c'est qu'avec cette méthode on ne peut pas recuperer ensuite le contenu du div dans un formulaire (ce qui est debile profond car quel est l'interet de bidouiller un div ??? franchement..enfin c'est pas le sujet..) Mais en gros je feinte en appelant une fonction js sur le onsubmit du formulaire qui me copie le innerhtml du div dans un textarea caché et ensuite je recupere le contenu du textarea de façon classique avec $_POST.

Voilou, au cas ou cela servirai à quelqu'un
@++ et merci quand meme !

Bon en fait je reviens sur le sujet car ca ne va pas... j'ai été un peu vite en besogne...
Je vais réexpliquer mon probleme et ensuite expliquer vers ou j'ai cherché.

Ce que je cherche à faire :
J'ai un textarea sur une page php. Au dessus du textarea j'ai plusieurs boutons (gras, italique, tabulation...)
Chaque bouton appelle une fonction js qui va mettre une balise maison là ou il faut.
-Soit c'est une selection et le bouton concerne une balise ouvrante + une fermante, dans quel cas il va ajouter les deux balises autour du texte selectionné
-Soit c'est une selection mais le bouton appelle une fonction qui ne doit mettre qu'une balise orpheline avant le texte, donc elle le fait
-Soit c'est pas une selection et le bouton donne une seule balise et dans ce cas elle va inserer la balise à l'endroit du caret.

Mon probleme est que je n'arrive pas à me servir des textrange et compagnie sous safari Impossible de faire une selection ! bref, je voulais donc savoir si quelqu'un avait trouvé une solution sous safari pour pouvoir faire ceci ? ou au moins un des points cité plus haut.

J'ai cherché du coté textrange normal, du coté du div en contenteditable (mais avec ca bah une fois qu'on a le texte de la selection on en fait quoi ??? lol) mais chou blanc... Le seul truc dont je suis sur c'est que dans les forums IPB (invision power board) cela fonctionne avec safari ! probleme : le code est difficilement decorticable pour mon niveau en js actuel
Vous pourrez trouver un exemple d'IPB sur www.macbidouille.com section forums. Dans le code source d'une page d'edition de topic il y a les liens des fichiers js (il me semble qu'ils ne sont pas declarés au debut de fichier mais vers le milieu).

Voilou !
merci d'avance à ceux qui trouverons, en esperant qu'il y en ai ^^
@++

Eureka !!!!!
Ca y est j'ai enfin trouvé un truc qui fonctionne nickel ! j'ai adapté quelques bouts de code de ci de là et en composant, j'ai réussi à faire ce que je cherchais compatible firefox, IE, safari (pour le reste je ne sais pas, ce serait d'ailleurs cool si quelqu'un pouvait essayer ^^)

Voici le code :

<script language="JavaScript" type="text/javascript">
var monobj = '';

function setvarglob(objet)
	{
	monobj = objet;
	}

function maj(balise,balise2)
	{
	var objet = monobj;
	try
		{
		if (document.selection) 
			{ 
			objet.focus();
			sel = document.selection.createRange();
			sel.text = balise + sel.text + balise2;
			}
		else
			{
			if(objet.selectionStart==objet.selectionEnd)
				{
				var textedebut = objet.value.substring(0,objet.selectionStart);
				var textefin = objet.value.substring(objet.selectionEnd, objet.value.length);
				objet.value = textedebut + balise + balise2 + textefin;
				}
			else
				{
				var textedebut = objet.value.substring(0,objet.selectionStart);
				var textefin = objet.value.substring(objet.selectionEnd, objet.value.length);
				var texteSelection = objet.value.substring(objet.selectionStart, objet.selectionEnd);
				objet.value = textedebut + balise + texteSelection + balise2 + textefin;
				}
			}
		}
	catch(e)
		{
		alert(e);
		}
	}	
</script>
<textarea id="contenu" name="contenu" cols="50" rows="20" onfocus="setvarglob(this)"></textarea>
<input type="button" value="tabulation" onmousedown="maj('[tab]','')" />
<input type="button" value="Souligné" onmousedown="maj('[u]','[/u]')" />

Donc ne soyez pas surpris en voyant la fonction setvarglob, c'est juste pour que la fonction maj pointe vers le textarea ayant le focus

Donc chez moi, ce code fonctionne tres bien pour plusieurs choses:

- inserer une balise orpheline devant le texte selectionné.
- inserer une balise orpheline à la position du caret
- inserer deux balises autour de la selection
- inserer les deux balises au niveau du caret (pas de selection).

fonctionne sous IE, firefox et safari
Pensez à mettre à jour la toolbar de votre forum la navigation n'en sera que meilleure pour moi etant sous safari

@++

zax ta gagné un bisou

Pouf je jette mon usine à gaz à la poubelle