Discussion :

[zax-tfh]

Salut,

Je cherche actuellement à créer une sorte d'aide à la saisie façon wysiwyg mais en pas compliqué.
Le truc c'est que je bloque actuellement sur la selection de texte sous safari (ehh oui je suis sous mac ^^)
D'après tout ce que j'ai pu lire sur le web, pas grand monde n'a réussi... MAIS ! sur le forum de www.macbidouille.com ca fonctionne !
En gros, il insere bien la balise au niveau du caret, sans probleme quoi. Seul truc, c'est que le forum c'est un forum IPB et que bon, c'est clair, c'est pas un truc de tapette... Bien que le code soit lisible facilement, il y a trop de fonctions imbriquées les unes dans les autres... donc meme en ayant tenté de décortiquer le code source, je n'arrive pas à savoir comment ils font pour recuperer le code selectionné dans un textarea ni comment remplacer le texte par la meme chose mais avec une balise ajoutée.

Auriez vous une idée de la marche à suivre ? ou tout simplement y'aurai-t-il quelqu'un qui connait le code IPB sur le bout des doigts et qui pourrait m'aider ?

Merci d'avance
@++[/b]

[siddh]

as tu essayé un outils comme tinymce sous safari ?

[zax-tfh]

oui et il ne supporte pas safari
Pour le moment, je n'ai vu que celui du forum IPB fonctionner...

[siddh]

une petite recherche avec l'ami google et hop !
http://ajaxian.com/archives/dojo-rich-wysiwyg-editor

le framework dojo semble etre la solution a ton probleme

[zax-tfh]

merci ^^
hier j'etais tombé sur dojo, mais j'ai jamais réussi à le trouver sur son site tu me diras vu l'heure qu'il etait j'etais completement naze...
Je vais y jeter un oeil.
thx !

ps : je ne ferme pas de suite le topic, on ne sait jamais

[zax-tfh]

Bon c'est bien ce qu'il me semblais, il utilise un div et non un textarea.
Faudrais que je me renseigne sur le div utilisé en content editable...
Merci en tout cas, j'ai l'impression que c'est la seule solution qui s'offre à moi, maintenant il faut que je voie si on peut recuperer le contenu du div et tout le tintouin, enfin bref, si cela fonctionne comme un textarea dans un formulaire.
Apres c'est pareil, en terme de compatibilité je ne sais pas du tout ce que cela donne avec les autres navi... à voir
@++

[siddh]

en terme de compatibilité, je pense que si ils se sont prit la tee a le faire fonctionner sous safari ca devrait marcher sous les autres

[zax-tfh]

Oui c'est sur mais sincerement là je suis en train de tester la proprieté div avec contenteditable mais rien a faire ! le $_POST['nomdudiv'] ne fonctionne pas... Donc bon, là je me demande sincerement comment je vais faire... Ca me gave, ils sont pas foutus de faire un truc une bonne fois pour de bon !Et ça tourne autour du pot....on a un textarea sur lequel on ne peut pas faire de selection normalement, on a un div sur lequel on ne peut pas recuperer le contenu... arf misere... je continue mes investigations

[zax-tfh]

Salut,

je reviens sur le sujet car au final je ne peux rien faire avec ce div...
Voila mon probleme (je réexplique pour les perdus ^^)

Je cherche à faire un mini wysiwyg (genre mettre des balises à l'endroit du curseur ou autour d'une selection, rien de plus, pas d'affichage special...)

Le probleme c'est que mon truc doit tourner sur la plupart des navigateurs (ou tout du moins, au moins IE, safari, firefox)
donc j'etais parti sur un truc pas mal qui est la methode getselection() qui fonctionne sur tous les navigateurs, mais apres ca bah plus rien... car le probleme de cette methode est qu'elle ne renvoie qu'un texte point barre, pas d'objet Donc apres je ne sais pas comment faire pour modifier cette selection et la retourner dans le texte saisi

quelqu'un aurait-il une idée ?
Merci d'avance
@++

[zax-tfh]

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 :

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

@++