rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut :

Mise en forme du texte

Posté par pdeslaur, le lundi 3 septembre 2007 à 22:44:07
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
Répondre à pdeslaur  Signaler ce message aux modérateurs Aller au dernier message

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 septembre 2007 à 22:46:32
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.
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien
   
Répondre à Dalida

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
*gab*, le lundi 3 septembre 2007 à 22:55:48
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*
Configuration: Windows XP
Firefox 2.0.0.6
   
Répondre à *gab*

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pdeslaur, le lundi 3 septembre 2007 à 23:00:30
Merci Gab, je me doutais que c'était du javascript... Je vais regarder ca

Merci encore
Pdeslaur
Configuration: Windows 2003
Internet Explorer 7.0
   
Répondre à pdeslaur

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pdeslaur, le lundi 3 septembre 2007 à 23:13:07
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
   
Répondre à pdeslaur

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 septembre 2007 à 23:15:21
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.
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien
   
Répondre à Dalida

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
*gab*, le lundi 3 septembre 2007 à 23:23:51
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*
Configuration: Windows XP
Firefox 2.0.0.6
   
Répondre à *gab*

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 septembre 2007 à 23:28:29
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();
}
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien
   
Répondre à Dalida

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pdeslaur, le lundi 3 septembre 2007 à 23:32:18
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épondre à pdeslaur


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
*gab*, le lundi 3 septembre 2007 à 23:33:22
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*
Configuration: Windows XP
Firefox 2.0.0.6
   
Répondre à *gab*

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
*gab*, le lundi 3 septembre 2007 à 23:43:54
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*
Configuration: Windows XP
Firefox 2.0.0.6
   
Répondre à *gab*

11


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pdeslaur, le lundi 3 septembre 2007 à 23:48:00
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épondre à pdeslaur

12


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 septembre 2007 à 23:50:20
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.
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien
   
Répondre à Dalida

13


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pdeslaur, le mercredi 5 septembre 2007 à 00:19:08
finalement j'ai utilisé Tinymce c'est la méthode la plus efficace et rapide

Pdeslaur
   
Répondre à pdeslaur

14


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Dalida, le mercredi 5 septembre 2007 à 00:24:17
salut,

juste pour ajouter le lien ,je viens d'aller voir et j'y retourne de suite : je crois que je vais essayer !!!
merci !
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien
   
Répondre à Dalida
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Word Viewer 2003Word Viewer - La visionneuse Word Viewer vous permet d'ouvrir des documents Word 2003 et des documents créés avec toutes les versions...Catégorie: Traitement de texte
Licence: Freeware/gratuit
Télécharger LiveQuartz 1.7.2LiveQuartz - “LiveQuartz est un éditeur d'image puissant et gratuit. Il est basé sur les calques et les filtres CoreImage. Vous avez...Catégorie: Dessin
Licence: Freeware/gratuit
Télécharger MediaInfo 0.7.7.4MediaInfo - MediaInfo fournit la liste des codecs nécessaires ainsi que des informations techniques sur vos fichiers vidéo et audio. ...Catégorie: Codecs
Licence: Open Source
Télécharger Pack de compatibilité Microsoft Office 2007 3Pack de compatibilité Microsoft Office 2007 - En installant le pack de compatibilité pour Microsoft Office 2000, Office XP ou Office 2003, vous pouvez ouvrir, modifier et...Catégorie: Bureautique
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Mise en forme du texte »