Mise en forme du texte

[Résolu/Fermé]
Signaler
-
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Bonjour,

J'aimerais savoir comment faire pour avoir des options e mise en forme du texte dans un site. Le meilleur exemple est ici dans "écrire un nouveau message". Nous avons l'option de mettre le texte en gras ou en italique sans avoir à éditer le code. Comme cela une personne sans connaissance en informatique peu facilement donner des caractéristique au texte.

Merci
Pdeslaur

13 réponses

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

est-ce que tu as regardé du côté des éditeurs en ligne ?
il y a par exemple FCKEditor, il produit directement du html et propose toute la mise en forme.
Messages postés
244
Date d'inscription
lundi 3 septembre 2007
Statut
Membre
Dernière intervention
2 mai 2008
60
Bonsoir,

Tu utilise le javascript comme ceci par exemple :

-------------------------------------------------------------------------------------
code :
-------------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
</HEAD>
<BODY>
<script>
function clicboutton(form_de_test,mef)
{
var styl=mef
var p = document.form_de_test.boite_de_texte;
switch (styl){
case "b": {p.style.fontWeight = "bold"; break}
case "u": {p.style.textDecoration = "underline"; break}
case "i": {p.style.fontStyle= "italic"; break}
case "center" : {p.style.textAlign= "center"; break}
default:
break;
}
}
</script>
<br> <FORM NAME="form_de_test">
<br> <textarea cols="50" rows="10" name="boite_de_texte" >Entrez votre texte...</textarea>
<br> <INPUT TYPE="button" NAME="bouton" VALUE="Gras" onClick="clicboutton(form_de_test, 'b')">
<INPUT TYPE="button" NAME="bouton" VALUE="Souligné" onClick="clicboutton(form_de_test, 'u' )">
<INPUT TYPE="button" NAME="bouton" VALUE="Italique" onClick="clicboutton(form_de_test, 'i' )">
<INPUT TYPE="button" NAME="bouton" VALUE="Centrer" onClick="clicboutton(form_de_test, 'center' )">
</FORM>
</BODY>
</HTML>

-------------------------------------------------------------------------------------

Le javascript (entre les balises <script> et </script>) permet de définir la valeur et donc la fonction des boutons.


*gab*

Merci Gab, je me doutais que c'était du javascript... Je vais regarder ca

Merci encore
Pdeslaur

Désoler de réécrire,
mais j'ai oublier de spécifier que je voulais seulement mettre le texte sélectionné en gras ou autre. Et aussi si possible, de faire qu'un autre clique sur un boutton enlève le gras...

Si vous avez juste un site de référence je serais content...
Pdeslaur
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
c'est un peu pour ça que je te proposais FCKEditor, c'est un peu une usine à gaz mais au moins tu as une interface complète disponible simplement.
Messages postés
244
Date d'inscription
lundi 3 septembre 2007
Statut
Membre
Dernière intervention
2 mai 2008
60
Voilà voilà,


<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
</HEAD>
<BODY>
<script>
function clicboutton(form_de_test,mef)
{
var styl=mef
var p = document.form_de_test.boite_de_texte;
switch (styl){
case "b": {p.style.fontWeight = "bold"; break}
case "normal": {p.style.fontWeight = "normal"; break}
case "u": {p.style.textDecoration = "underline"; break}
case "i": {p.style.fontStyle= "italic"; break}
case "center" : {p.style.textAlign= "center"; break}
default:
break;
}
}
</script>
<br> <FORM NAME="form_de_test">
<br> <textarea cols="50" rows="10" name="boite_de_texte" >Entrez votre texte...</textarea>
<br> <INPUT TYPE="button" NAME="bouton" VALUE="Gras" onClick="clicboutton(form_de_test, 'b')">
<INPUT TYPE="button" NAME="bouton" VALUE="Normal" onClick="clicboutton(form_de_test, 'normal')">
<INPUT TYPE="button" NAME="bouton" VALUE="Souligner" onClick="clicboutton(form_de_test, 'u' )">
<INPUT TYPE="button" NAME="bouton" VALUE="Italique" onClick="clicboutton(form_de_test, 'i' )">
<INPUT TYPE="button" NAME="bouton" VALUE="Centrer" onClick="clicboutton(form_de_test, 'center' )">
</FORM>
</BODY>
</HTML>


Malheureusement, je ne trouve pas comment enlever le souligné, l'italique, et le centrage, j'y travaille ^^


Je n'ai pas très bien compris, l'utilisateur peut uniquement mettre en gras ou en normal ? Dans ce cas c'est :


<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
</HEAD>
<BODY>
<script>
function clicboutton(form_de_test,mef)
{
var styl=mef
var p = document.form_de_test.boite_de_texte;
switch (styl){
case "b": {p.style.fontWeight = "bold"; break}
case "normal": {p.style.fontWeight = "normal"; break}
default:
break;
}
}
</script>
<br> <FORM NAME="form_de_test">
<br> <textarea cols="50" rows="10" name="boite_de_texte" >Entrez votre texte...</textarea>
<br> <INPUT TYPE="button" NAME="bouton" VALUE="Gras" onClick="clicboutton(form_de_test, 'b')">
<INPUT TYPE="button" NAME="bouton" VALUE="Normal" onClick="clicboutton(form_de_test, 'normal')">
</FORM>
</BODY>
</HTML>


*gab*
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
avec cette version seul l'affichage change, non ?
moi je pensais qu'il fallait un JS qui inclut les balises HTML, comme celui de CCM :
function insertTag ( txtName, tag, enclose ) {
	var closeTag = ((enclose) ? "</" + tag + ">" : "");
	var Tag = "<" + tag + ">";
	var txtObj = eval ( txtName );
	if (ie==1)
	{
			var str = document.selection.createRange().text;
			txtObj.focus();
		var sel = document.selection.createRange();
			sel.text = Tag + str + closeTag;
			return;
	}
	else
	{
		// position du scroll
		oldPos = txtObj.scrollTop;
		oldHght = txtObj.scrollHeight;

		// position du curseur
		pos = txtObj.selectionEnd + Tag.length + closeTag.length;

		txtObj.value = txtObj.value.substr(0, txtObj.selectionStart) + Tag +
		txtObj.value.substr(txtObj.selectionStart,
		txtObj.selectionEnd-txtObj.selectionStart) +
		closeTag + txtObj.value.substr(txtObj.selectionEnd);

		// repositionnement cuseur aprés la balise fermante
		// peut être grandemant amélioré ;-)
		txtObj.selectionStart = pos;
		txtObj.selectionEnd = pos;

		// calcul et application de la nouvelle bonne postion du scroll
		newHght = txtObj.scrollHeight - oldHght;
		txtObj.scrollTop = oldPos + newHght;
	}
txtObj.focus();
}

Bien en fait, je vais vous expliquer ce que je fais. Je suis en train de créer un site en PHP et MYSQL qui se met à jour automatiquement avec une interface graphique. Donc l'administrateur n'a qu'a se connecter et éditer le sujet qu'il veux et je dois mettre des options de mise en forme. Et je vais mettre le plus d'option possible à l'utilisateur. J'aivais mis le gras en exemple.

J'espère j'ai été clair...

Pdeslaur
Ho et merci gab pour le nouveau script
Messages postés
244
Date d'inscription
lundi 3 septembre 2007
Statut
Membre
Dernière intervention
2 mai 2008
60
Hmmm, possible, je ne sais plus, peut-être faudrat-il trouver une solution sur http://www.javascriptfr.com/ ?
Tu me fais douter maintenant Dalida ^^

*gab*
Messages postés
244
Date d'inscription
lundi 3 septembre 2007
Statut
Membre
Dernière intervention
2 mai 2008
60
Hmm, je pense que dans ce cas le mieux serais comme l'a dit Dalida, utilise FCKEditor, ou bien Spaw Editor. A moins que quelqu'un te donne un bon script !

*gab*

Ok, je vais voir ce que je peut faire. Mais gab, ton scipt marchait sauf que c'est tout la boite de texte qui se mettait en gras.
Peut importe, je vais faire des recherches.

Merci à tous.
Pdeslaur
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
le problème c'est que tu vas devoir enregistrer ces informations et que le JS ne fait que modifier l'apparence du texte mais pas le code html.
donc tu vas te retrouver avec du texte brut si tu le passe dans un fichier ou une bdd.

finalement j'ai utilisé Tinymce c'est la méthode la plus efficace et rapide

Pdeslaur
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

juste pour ajouter le lien ,je viens d'aller voir et j'y retourne de suite : je crois que je vais essayer !!!
merci !