Bonjour bonjour,

et d'avance, merci pour votre aide

Je suis un noob en js, mais je code depuis longtemps en php, C et autre, donc pas besoin d'expliquer tout depuis la base...

J'ai un soucis avec la méthode getElementById... Je voudrais en somme comprendre comment fonctionnent tous ces forums (inclu SDZ) où des boutons permettent de modifier l'attribut value d'un objet "textable" d'un formulaire comme un textarea ou un textfield... je m'explique...

J'ai pigé que je peux récupérer la valeur entrée dans l'un de ces élément en faisant un document.getElementById(idTextarea).value . Comment faire maintenant, si je veux introduire un <strong></strong> autour du segment "selected" (j'entend: surligné par le curseur).

A priori je n'ai pas vu d'attribut "selected" de l'objet textarea, mais peut être est il possible de faire un

var fragmentSurligne = document.getElementById(idTextarea).selected_cluster_from_value ; //c'est un terme inventé

comme il est possible de faire un

var valeurTextarea = document.getElementById(idTextarea).value ;

Puis d'entourer la variable fragmentSurligne avec des <strong></strong>. Et enfin de faire une sorte de preg_replace (pour ceux qui connaissent php) pour retrouver le fragment sélectionné dans la variable valeurTextarea. Je m'explique en code:

//je récupère donc la portion sélectionnée du textarea
var fragmentSurligne = document.getElementById(idTextarea).selected_cluster_from_value ; 
// je récupère l'entièreté de la valeur du textarea
var valeurTextarea = document.getElementById(idTextarea).value ; 

/* J'entoure la portion de texte sélectionnée 
par l'utilisateur par des balises <strong> 
en assumant qu'il ait cliqué sur le bouton "Gras".  */
var fragmentSurligneModifie = "<strong>" + fragmentSurligne + "</strong>" ; 

/* Je cherche dans la valeur du textarea, la portion sélectionnée 
par l'utilisateur et je la remplace par la portion qui a subit le traitement 
strong (c'est tout inventé, mais ceux qui ont fait du php me comprendront... ;))*/
valeurTextarea.preg_replace(fragmentSurligne, fragmentSurligneModifie) ; 


// J'assigne enfin la nouvelle valeur à l'élément textarea en question....
document.getElementById(idTextarea).value = valeurTextarea;

Voilà voilà, je savais pas si je pouvais mieux expliquer ce que je préssent... Si ça se trouve, on procède de manière totalement différente, mais bon, ça valait le coup d'essayer.

S'il y a un tuto pour ça, je serais ravi

A+ et merci encore!

Là tu t'aventures vers une des choses qui révèle le mieux la prise de tête du javascript que l'on ne connait pas en PHP : les différences entre navigateurs
Récupérer une sélection marche de façon fondamentalement différente entre FF et IE. C'est là qu'il devient utile de repérer le navigateur utilisé :

var is_ie = ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1));

Et voici une fonction javascript (peut-être pas optimisée, je l'ai écrite il y a déjà fort longtemps) qui sert à baliser une zone de texte sélectionnée dans une textarea :

function baliserSelection(debut, fin){
	var textarea = document.getElementById("textarea");
	textarea.focus();

	if (is_ie){
		theSelection = document.selection.createRange().text;
		document.selection.createRange().text = debut + theSelection + fin;
		//Modifier position curseur
		range = document.selection.createRange();
		if (theSelection.length == 0) {
		  range.move('character', -fin.length);
		} else {
		  range.moveStart('character', debut.length + theSelection.length + fin.length);
		}
		range.select();
	}
	else if (textarea.selectionEnd && (textarea.selectionEnd - textarea.selectionStart > 0)){
		var selLength = textarea.textLength;
		var selStart = textarea.selectionStart;
		var selEnd = textarea.selectionEnd;
		if (selEnd == 1 || selEnd == 2){
			selEnd = selLength;
		}
		var s1 = (textarea.value).substring(0,selStart);
		var s2 = (textarea.value).substring(selStart, selEnd)
		var s3 = (textarea.value).substring(selEnd, selLength);
		textarea.value = s1 + debut + s2 + fin + s3;
		//Modifier position curseur
		textarea.selectionStart = debut.length + selEnd + fin.length;
		textarea.selectionEnd = debut.length + selEnd + fin.length;
	}	
	if (textarea.createTextRange){
		textarea.caretPos = document.selection.createRange().duplicate();
	}
}

Voici qui devrait répondre à ta question. Cependant, un problème à prendre en compte : il faut encore savoir si l'utilisateur a sélectionné du texte ou non
Voici un vieux (le script date de bien deux ans ) wysiwyg basique que j'avais codé, tu peux regarder son code js. Il n'est vraiment pas "propre", beaucoup de lignes inutiles et certaines choses un peu maladroites, mais il contient la majorité des choses nécessaires pour faire fonctionner un éditeur de façon correcte, et pourra peut-être t'inspirer :
http://eliaslevert.evoconcept.net/site [...] g/wysiwyg.php
Le code js se trouve à cette adresse :
http://eliaslevert.evoconcept.net/site [...] yg/wysiwyg.js

Ouaiiiiis le bonheur du js... C'est tellement dommage, puisque ce "langage" (prononcer les guillemets) allège vraiment les soucis de "non dynamisme" (prononcer aussi, c'est un peu contradictoire) de php-web.

Enfin, je vais jeter un oeil.

Merci pour cette réponse aussi complète!

++



EDIT: je viend de checker tes liens... Assez puissante ta petite démo. J'ai testé IE7, FF et opera et tout marche. Qu'en est-il de IE<7, ff<2, opera<8 et safari (ne pas oublier les (respectueux) mangeur de pomme)?

Question 1 (ça commence bien): pourquoi dans la fonction baliserSelection, lorsque la is_ie vaut true, tu déclares theSelection de manière implicite? Est ce voulu parce que tu as besoin que cette variable soit globale d'une manière ou d'une autre, où juste une erreur par ommission?

Merci encore



RE-EDIT:

Je viens de re-créer tes fonctions (de la page et CS joint) et miracle, tout marche comme prévu. JS est encore un peu obscur pour moi, mais je dois dire que je trouve ton code plutôt organisé. Il manque peut etre quelques commentaires, mais suivre ton code à l'oeil nu (et sans même l'avoir copié dans un environnement pour colorer le text) a été un vraim plaisir!

Donc merci pour toutes ces infostrès utiles. Si tu avais le temps, je pense que tous les zéro (et autres googleurs) trouverait un magnifique intérêt à transformer ce code source en tuto. Il en existe bien quelques uns, mais ils sont obscurs et incomplet...

Allez ++