Mise en forme du texte

Résolu
Utilisateur anonyme -  
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

  1.  Dalida Contributeur
    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.
    1. 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*
      1. Utilisateur anonyme
        Merci Gab, je me doutais que c'était du javascript... Je vais regarder ca

        Merci encore
        Pdeslaur
        1. 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
          2. Dalida Contributeur
            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.
            1. 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*
              1. Dalida Contributeur
                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();
}
            2. 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
              2. 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*
                1. 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
                  1. Dalida Contributeur
                    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.
                    1. Utilisateur anonyme
                      finalement j'ai utilisé Tinymce c'est la méthode la plus efficace et rapide

                      Pdeslaur
                      1. Dalida Contributeur
                        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

                        Comment annuler mise en forme tableau
                        etiennette57

                        8 réponses