Mise en forme du texte

Résolu

Utilisateur anonyme -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention - 5 sept. 2007 à 00:24

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

Afficher la suite

A voir également:

Mise en forme du texte
Mise en forme conditionnelle excel - Guide
Mise en forme tableau word - Guide
Transcription audio en texte word gratuit - Guide
Mise a jour chrome - Accueil - Applications & Logiciels
Mise en forme tableau croisé dynamique - Guide

13 réponses

Réponse 1 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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.

Réponse 2 / 13

Utilisateur anonyme

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*

Réponse 3 / 13

Utilisateur anonyme

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

Merci encore
Pdeslaur

Réponse 4 / 13

Utilisateur anonyme

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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.

Réponse 6 / 13

Utilisateur anonyme

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*

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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();
}

Réponse 7 / 13

Utilisateur anonyme

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

Réponse 8 / 13

Utilisateur anonyme

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*

Réponse 9 / 13

Utilisateur anonyme

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*

Réponse 10 / 13

Utilisateur anonyme

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

Réponse 11 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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.

Réponse 12 / 13

Utilisateur anonyme

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

Pdeslaur

Réponse 13 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

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

Discussions similaires

copie de texte

Votre réponse

Discussions similaires